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球形实景-热点追踪→