3D圓柱實景-風景瀏覽

# FastWeb 3D圓柱實景-風景瀏覽

專案地址：https://naver.github.io/egjs-view360/panoviewer.html (opens new window)

egjs-view360是全景顯示的庫，可用於展示360環繞全景影像或球形全景影像，在移動設備上支援陀螺儀顯示，可帶給使用者身臨其境的感受。本示例將引入一個基礎的柱形全景示例，帶大家瞭解如何使用。

# 1. 下載示例

點選https://naver.github.io/egjs-view360/release/latest/dist/PanoViewer/view360.panoviewer.pkgd.min.js (opens new window)以下載庫js檔案，在library/js中建立目錄egjs-view360，將下載的js檔案放置於此。

# 2. 確認參數

使用的線上示例的樣式內容如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>egjsdemo</title>
        <link rel="stylesheet" type="text/css" href="https://naver.github.io/egjs-view360/common/css/demo.css">
        <link rel="stylesheet" type="text/css" href="https://naver.github.io/egjs-view360/common/css/PanoControls.css">
        <script src="https://naver.github.io/egjs-view360/release/latest/dist/PanoViewer/view360.panoviewer.pkgd.min.js"></script>
        <script src="https://naver.github.io/egjs-view360/common/js/PanoControls.js"></script>
        <script src="https://naver.github.io/egjs-view360/common/js/PieView.js"></script>
        <script src="https://naver.github.io/egjs-view360/common/js/jquery-2.2.4.js"></script>
        <script src="https://naver.github.io/egjs-view360/common/js/screenfull.min.js"></script>
        <script src="src="https://cdn.jsdelivr.net/npm/sweetalert2@9.7.2/dist/sweetalert2.all.min.js"></script>
	</head>
	<body>
        <div class="viewer">
            <div class="container"></div>
        </div>
        <script>
            function resize() {
                panoViewer.updateViewportDimensions();
            }
            var viewer = document.querySelector(".viewer");
                var container = viewer.querySelector(".container");
                var panoViewer = new eg.view360.PanoViewer(container,
                    {
                        image: "https://naver.github.io/egjs-view360/examples/img/smartphone-panorama-picture.jpg",
                        projectionType: "panorama",
                        useZoom: false,
                        yawRange: [-180,180], /* horizontal FOV by degree is 360. */
                        fovRange: [30,70] /* max fov should vertical FOV of the image. 70 */
                    }
                );

                window.addEventListener("resize", resize);

                PanoControls.init(container, panoViewer);
                PanoControls.showLoading();
        </script>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

# 3. 修改模板

# 3.1. 本地化處理

可以看到上述的html文件中引入了外部鏈接庫檔案，FastWeb預設的庫中已包含以下內容，如需要自行建立的，請將整理的以下鏈接下載下來並按照指示放入指定目錄中。

以下檔案請放入library/js/egjs-view360/common/css/目錄
https://naver.github.io/egjs-view360/common/css/demo.css
https://naver.github.io/egjs-view360/common/css/PanoControls.css

以下檔案請放入library/js/egjs-view360/common/js/目錄
https://naver.github.io/egjs-view360/common/js/PanoControls.js
https://naver.github.io/egjs-view360/common/js/PieView.js
https://naver.github.io/egjs-view360/common/js/jquery-2.2.4.js
https://naver.github.io/egjs-view360/common/js/screenfull.min.js
https://cdn.jsdelivr.net/npm/sweetalert2@9.7.2/dist/sweetalert2.all.min.js

以下檔案下載下來后請將檔案放入library/js/egjs-view360/examples/img
https://naver.github.io/egjs-view360/examples/img/smartphone-panorama-picture.jpg

1
2
3
4
5
6
7
8
9
10
11
12
13

部分庫檔案需依賴圖示檔案，從以下地址下載圖示檔案並將其放入指定目錄中。

以下檔案請放入library/js/egjs-view360/common/img/目錄
https://naver.github.io/egjs-view360/common/img/sp_component.png
https://naver.github.io/egjs-view360/common/img/common_loading_mo_white.gif

1
2
3

將html文件中對應的鏈接修改爲本地的相對鏈接，修改後的示例如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>egjsdemo</title>
        <link rel="stylesheet" type="text/css" href="library/js/egjs-view360/common/css/demo.css">
        <link rel="stylesheet" type="text/css" href="library/js/egjs-view360/common/css/PanoControls.css">
        <script src="library/js/egjs-view360/view360.panoviewer.pkgd.min.js"></script>
        <script src="library/js/egjs-view360/common/js/PanoControls.js"></script>
        <script src="library/js/egjs-view360/common/js/PieView.js"></script>
        <script src="library/js/egjs-view360/common/js/jquery-2.2.4.js"></script>
        <script src="library/js/egjs-view360/common/js/screenfull.min.js"></script>
  </head>
  <body>
        <div class="viewer">
            <div class="container"></div>
        </div>
        <script>
            function resize() {
                panoViewer.updateViewportDimensions();
            }
            var viewer = document.querySelector(".viewer");
                var container = viewer.querySelector(".container");
                var panoViewer = new eg.view360.PanoViewer(container,
                    {
                        image: "library/js/egjs-view360/examples/img/smartphone-panorama-picture.jpg",
                        projectionType: "panorama",
                        useZoom: false,
                        yawRange: [-180,180], /* horizontal FOV by degree is 360. */
                        fovRange: [30,70] /* max fov should vertical FOV of the image. 70 */
                    }
                );
                PanoControls.init(container, panoViewer);
                PanoControls.showLoading();
                window.addEventListener("resize", resize);
        </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

在上文中有一個image的標記，此處可將目錄設定為param_image。其下方還有四個參數可進行自定義設定，可分別設定名稱為param_type，param_useZoom、param_yawRange，param_fovRange。

# 3.2. 標記參數

將上述的參數取值分別用參數名稱來代替，替換后的內容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>egjsdemo</title>
        <link rel="stylesheet" type="text/css" href="library/js/egjs-view360/common/css/demo.css">
        <link rel="stylesheet" type="text/css" href="library/js/egjs-view360/common/css/PanoControls.css">
        <script src="library/js/egjs-view360/view360.panoviewer.pkgd.min.js"></script>
        <script src="library/js/egjs-view360/common/js/PanoControls.js"></script>
        <script src="library/js/egjs-view360/common/js/PieView.js"></script>
        <script src="library/js/egjs-view360/common/js/jquery-2.2.4.js"></script>
        <script src="library/js/egjs-view360/common/js/screenfull.min.js"></script>
  </head>
  <body>
        <div class="viewer">
            <div class="container"></div>
        </div>
        <script>
            function resize() {
                panoViewer.updateViewportDimensions();
            }
            var viewer = document.querySelector(".viewer");
                var container = viewer.querySelector(".container");
                var panoViewer = new eg.view360.PanoViewer(container,
                    {
                        image: "param_image",
                        projectionType: "param_type",
                        useZoom: param_useZoom,
                        yawRange: param_yawRange, /* horizontal FOV by degree is 360. */
                        fovRange: param_fovRange /* max fov should vertical FOV of the image. 70 */
                    }
                );
                PanoControls.init(container, panoViewer);
                PanoControls.showLoading();
                window.addEventListener("resize", resize);


        </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

至此，模板內容已設定完成，可進入JQueryFrame元件管理界面，將上述內容填寫入模板中。此庫由於引用了較多的外部的css與js檔案，為保證其不被FastWeb框架影響，建議使用URLFrame容器引入。

# 3.3. 設定參數

在參數界面中，設定上述參數，分別為其設定預設值：

# 3.4. 與資料庫欄位聯動

可以設定數據來源於資料庫欄位，此示例可留空不設定。

# 4. 設定檔案

全景瀏覽的初始示例使用的相片為柱狀全景影象，如需要自行設計環繞全景圖片，可參考以下方式進行設定。

拍攝環繞式全景影象可使用支援全景模式照相的手機進行拍攝。如您的手機不支援全景模式拍照，也可以在前期單獨拍攝一組環繞照片，在後期使用全景照片拼接工具拼接全景照片。

在拍攝全景照片時請將照相機放置在三腳架上，確認周圍環境不會影響到相機的旋轉運動，保持周圍環境光源的穩定。找平基準線，基準線應與照相機的鏡頭水平線高度保持一致，固定相機使鏡頭保持水平。拍攝的場景中物體請保持固定狀態，在拍攝時不要在鏡頭前移動。

如需要拍攝的拼接痕跡少，請減少拍攝的移動間距，每移動一段距離，固定好后拍攝照片。拍攝時請注意始終保持鏡頭處於水平狀態。

拍攝完成的照片可匯入至PTGui中，PTGui提供了簡易的方式來幫助使用者快速產生需要的全景圖片，將拍攝的圖片經過圖片匯入、設定全景以及建立全景三個步驟就可以實現全景圖片的產生。

最終導出的圖片如果大小較大的話，可以縮減畫素來壓縮檔案至適宜網路傳輸的大小。將檔案放置於指定的目錄中后，修改模板中image: "library/js/egjs-view360/examples/img/smartphone-panorama-picture.jpg",部分的地址為自定義的圖片地址。

← 氣壓-圓形-指針氣壓計1 3D球形實景-熱點追蹤→