爱招飞帮助手册 爱招飞帮助手册
首页
  • 学习手册

    • 基本入门
    • 功能介绍
    • 控件说明
    • 功能用法
    • 专用模板
    • 开发流程
    • 函数程序
  • 学习手册

    • 基本入门
    • 功能介绍
    • 控件说明
    • 系统工具
    • 系统管理
    • 数据库工具
    • 专用模板
    • 外部功能
    • 开发流程
    • 函数代码
  • 开发手册
  • 学习手册

    • 基本入门
    • 功能介绍
    • 控件说明
    • 功能用法
    • 专用模板
    • 开发流程
    • 函数程序
  • 开发手册
  • 学习手册

    • 基本入门
    • 功能介绍
    • 控件说明
    • 功能用法
    • 专用模板
    • 开发流程
    • 函数程序
  • 开发手册
  • 学习手册

    • 安装配置
    • 快速上手
    • 界面介绍
    • 功能介绍
    • 报表设计
  • 学习手册

    • 安装配置
    • 快速上手
    • 界面介绍
    • 功能介绍
    • RestAPI
    • WebSocket
  • 学习手册

    • 安装配置
    • 快速上手
    • 程序架构
    • 界面介绍
    • 功能介绍
  • 学习手册

    • 安装配置
    • 快速上手
    • 界面介绍
    • 功能介绍
  • 学习手册

    • 安装配置
    • 快速上手
    • 界面介绍
    • 功能介绍
    • 预设资料
    • RestAPI说明
    • WebSocket说明
    • MQTT说明
    • Python说明
    • 自定程序
    • 运行卫士
    • 自动化作业
    • 函数程序
    • 控件使用
  • 开发手册
  • FastERP
  • FastWeb
  • Smart
  • PinToo
  • Flying
  • TARS
  • 通用功能

    • Report
    • Script
    • Echarts
    • Chart
    • DB Install
    • HiDesk
    • HiNAT
    • FastBPM
    • ReportBuilder
首页
  • 学习手册

    • 基本入门
    • 功能介绍
    • 控件说明
    • 功能用法
    • 专用模板
    • 开发流程
    • 函数程序
  • 学习手册

    • 基本入门
    • 功能介绍
    • 控件说明
    • 系统工具
    • 系统管理
    • 数据库工具
    • 专用模板
    • 外部功能
    • 开发流程
    • 函数代码
  • 开发手册
  • 学习手册

    • 基本入门
    • 功能介绍
    • 控件说明
    • 功能用法
    • 专用模板
    • 开发流程
    • 函数程序
  • 开发手册
  • 学习手册

    • 基本入门
    • 功能介绍
    • 控件说明
    • 功能用法
    • 专用模板
    • 开发流程
    • 函数程序
  • 开发手册
  • 学习手册

    • 安装配置
    • 快速上手
    • 界面介绍
    • 功能介绍
    • 报表设计
  • 学习手册

    • 安装配置
    • 快速上手
    • 界面介绍
    • 功能介绍
    • RestAPI
    • WebSocket
  • 学习手册

    • 安装配置
    • 快速上手
    • 程序架构
    • 界面介绍
    • 功能介绍
  • 学习手册

    • 安装配置
    • 快速上手
    • 界面介绍
    • 功能介绍
  • 学习手册

    • 安装配置
    • 快速上手
    • 界面介绍
    • 功能介绍
    • 预设资料
    • RestAPI说明
    • WebSocket说明
    • MQTT说明
    • Python说明
    • 自定程序
    • 运行卫士
    • 自动化作业
    • 函数程序
    • 控件使用
  • 开发手册
  • FastERP
  • FastWeb
  • Smart
  • PinToo
  • Flying
  • TARS
  • 通用功能

    • Report
    • Script
    • Echarts
    • Chart
    • DB Install
    • HiDesk
    • HiNAT
    • FastBPM
    • ReportBuilder
  • FastWeb帮助主页
  • 学习手册

    • 基本入门

    • 功能介绍

    • 控件说明

    • 系统工具

    • 系统管理

    • 云服务工具

    • 数据库工具

    • 专用模板

    • 外部功能

    • 开发流程

      • 开发案例
      • 纺织印染业ERP设计实务
      • 页面布局
      • URLFrame与JS的交互
      • 自定控件扩展

        • 多用途-圆形-指针仪表盘
        • 多用途-半圆形-指针仪表盘1
        • 多用途-半圆形-指针仪表盘2
        • 温度-垂直-刻度计
        • 方向-圆形-指南针
        • 3D物体实景-自转浏览
        • 3D物体实景-公转浏览
        • 3D平移实景-室内浏览
        • 3D平移实景-室外浏览
        • 互动-SVG-HMI组件
        • 浏览-照片-显示组件
        • 气压-圆形-指针气压计1
        • 3D圆柱实景-风景浏览
        • 3D球形实景-热点追踪
        • 3D球形实景-全景视频
        • 3D球形全景-汽车内饰
          • 1. 下载示例
          • 2. 确认参数
          • 3. 修改模板
            • 3.1. 本地化处理
            • 3.2. 标记参数
            • 3.3. 设置参数
            • 3.4. 与数据库字段联动
          • 4. 设置文件
        • 3D球形实景-全景漫游
      • RestAPI扩展

      • IsoBean开发

    • 函数程序

  • 开发手册

目录

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></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="https://cdn.jsdelivr.net/npm/sweetalert2@9.7.2/dist/sweetalert2.all.min.js"></script>
        <script src="https://naver.github.io/egjs-view360/common/js/GyroTouchOptions.js"></script>
        <style>
            .message {
                display: block;
                margin: 10px auto;
                box-shadow: 0 0 0 1px #e0b4b4 inset, 0 0 0 0 transparent;
                background-color: #fff6f6;
                color: #9f3a38;
                padding: 1em 1.5em;
                box-sizing: border-box;
                width: 100%;
                max-width: 800px;
            }
            .message span {
                font-weight: bold;
            }
            .phone {
                position: absolute;
                width: 36px;
                height: 60px;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                border-radius: 5px;
                background: #333;
                transform: rotate(20deg);
            }
            .phone:before {
                position: absolute;
                content: "";
                width: 30px;
                height:40px;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                background: #fff;
            }
            .rotate {
                position: absolute;
                width: 100%;
                height: 30px;
                border-radius: 50%;
                border: 3px solid #aaa;
                border-bottom: 0;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                transform: rotate(20deg);
                z-index: -2;
                box-sizing: border-box;
            }
            .rotate:before, .rotate:after {
                position: absolute;
                content: "";
                border-top: 7px solid transparent;
                border-bottom: 7px solid transparent;
                bottom: -5px;
            }
            .rotate:before {
                border-left: 10px solid #aaa;
                left: 15px;
                transform: rotate(10deg);
            }
            .rotate:after {
                border-right: 10px solid #aaa;
                right: 15px;
                transform: rotate(-10deg);
            }
        </style>
	</head>
	<body>
    </div>
    <div class="panoviewer-container viewer">
        <div id="panoSet">
            <div class="panoviewer container" id="myPanoViewer"></div>
        </div>
    </div>
    <script>
        /*if (navigator.userAgent.indexOf("Mobi") === -1) {
            document.querySelector(".message").style.display = "block";
        } */
        
        /* create PanoViewer with option */
        var PanoViewer = eg.view360.PanoViewer;
        var container = document.getElementById("myPanoViewer");
        var panoViewer = new PanoViewer(container, {
            image: "https://naver.github.io/egjs-view360/examples/panoviewer/controls/equi-car-inside.jpg",
            projectionType: "equirectangular",
            useZoom: true,
            yawRange: [-180, 180], /* horizontal FOV by degree is 360. */
            pitchRange: [-90, 90], /* vertical FOV by degree is 70. */
            fovRange: [30, 70] /* max fov should vertical FOV of the image. */
        });
        
        var panoviewerSet = document.getElementById("panoSet");
        PanoControls.init(panoviewerSet, panoViewer, {enableGyroOption: true, enableTouchOption: true});
        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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

  其中我们从106行开始找到可配置的项目,将各配置项后的设置值使用参数进行替换。分别替换的名称为param_image,param_useZoom,param_yawRange、param_pitchRange、param_fovRange。

# 3. 修改模板

# 3.1. 本地化处理

  可以看到上述的html文档中引入了外部链接库文件,将整理的以下链接指向的文件下载下来并按照指示放入指定目录中。

以下文件请放入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
https://naver.github.io/egjs-view360/common/js/GyroTouchOptions.js

以下文件下载下来后请将文件放入library/js/egjs-view360/examples/img/目录
https://naver.github.io/egjs-view360/examples/panoviewer/controls/equi-car-inside.jpg
1
2
3
4
5
6
7
8
9
10
11
12
13
14

  部分库文件需依赖图标文件,从以下地址下载图标文件并将其放入指定目录中。

以下文件请放入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></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>
    <script src="library/js/egjs-view360/common/js/sweetalert2.all.min.js"></script>
        <script src="library/js/egjs-view360/common/js/GyroTouchOptions.js"></script>
        <style>
            .message {
                display: block;
                margin: 10px auto;
                box-shadow: 0 0 0 1px #e0b4b4 inset, 0 0 0 0 transparent;
                background-color: #fff6f6;
                color: #9f3a38;
                padding: 1em 1.5em;
                box-sizing: border-box;
                width: 100%;
                max-width: 800px;
            }
            .message span {
                font-weight: bold;
            }
            .phone {
                position: absolute;
                width: 36px;
                height: 60px;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                border-radius: 5px;
                background: #333;
                transform: rotate(20deg);
            }
            .phone:before {
                position: absolute;
                content: "";
                width: 30px;
                height:40px;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                background: #fff;
            }
            .rotate {
                position: absolute;
                width: 100%;
                height: 30px;
                border-radius: 50%;
                border: 3px solid #aaa;
                border-bottom: 0;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                transform: rotate(20deg);
                z-index: -2;
                box-sizing: border-box;
            }
            .rotate:before, .rotate:after {
                position: absolute;
                content: "";
                border-top: 7px solid transparent;
                border-bottom: 7px solid transparent;
                bottom: -5px;
            }
            .rotate:before {
                border-left: 10px solid #aaa;
                left: 15px;
                transform: rotate(10deg);
            }
            .rotate:after {
                border-right: 10px solid #aaa;
                right: 15px;
                transform: rotate(-10deg);
            }
        </style>
  </head>
  <body>
    <div class="panoviewer-container viewer">
        <div id="panoSet">
            <div class="panoviewer container" id="myPanoViewer"></div>
        </div>
    </div>
    <script>
        /*if (navigator.userAgent.indexOf("Mobi") === -1) {
            document.querySelector(".message").style.display = "block";
        } */
        
        /* create PanoViewer with option */
        var PanoViewer = eg.view360.PanoViewer;
        var container = document.getElementById("myPanoViewer");
        var panoViewer = new PanoViewer(container, {
            image: "library/js/egjs-view360/examples/img/equi-car-inside.jpg",
            projectionType: "equirectangular",
            useZoom: true,
            yawRange: [-180, 180], /* horizontal FOV by degree is 360. */
            pitchRange: [-90, 90], /* vertical FOV by degree is 70. */
            fovRange: [30, 70] /* max fov should vertical FOV of the image. */
        });
        
        var panoviewerSet = document.getElementById("panoSet");
        PanoControls.init(panoviewerSet, panoViewer, {enableGyroOption: true, enableTouchOption: true});
        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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118

# 3.2. 标记参数

  将上述的参数取值分别用参数名称来代替,替换后的内容如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></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>
    <script src="library/js/egjs-view360/common/js/sweetalert2.all.min.js"></script>
        <script src="library/js/egjs-view360/common/js/GyroTouchOptions.js"></script>
        <style>
            .message {
                display: block;
                margin: 10px auto;
                box-shadow: 0 0 0 1px #e0b4b4 inset, 0 0 0 0 transparent;
                background-color: #fff6f6;
                color: #9f3a38;
                padding: 1em 1.5em;
                box-sizing: border-box;
                width: 100%;
                max-width: 800px;
            }
            .message span {
                font-weight: bold;
            }
            .phone {
                position: absolute;
                width: 36px;
                height: 60px;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                border-radius: 5px;
                background: #333;
                transform: rotate(20deg);
            }
            .phone:before {
                position: absolute;
                content: "";
                width: 30px;
                height:40px;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                background: #fff;
            }
            .rotate {
                position: absolute;
                width: 100%;
                height: 30px;
                border-radius: 50%;
                border: 3px solid #aaa;
                border-bottom: 0;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                transform: rotate(20deg);
                z-index: -2;
                box-sizing: border-box;
            }
            .rotate:before, .rotate:after {
                position: absolute;
                content: "";
                border-top: 7px solid transparent;
                border-bottom: 7px solid transparent;
                bottom: -5px;
            }
            .rotate:before {
                border-left: 10px solid #aaa;
                left: 15px;
                transform: rotate(10deg);
            }
            .rotate:after {
                border-right: 10px solid #aaa;
                right: 15px;
                transform: rotate(-10deg);
            }
        </style>
  </head>
  <body>
    <div class="panoviewer-container viewer">
        <div id="panoSet">
            <div class="panoviewer container" id="myPanoViewer"></div>
        </div>
    </div>
    <script>
        /*if (navigator.userAgent.indexOf("Mobi") === -1) {
            document.querySelector(".message").style.display = "block";
        } */
        
        /* create PanoViewer with option */
        var PanoViewer = eg.view360.PanoViewer;
        var container = document.getElementById("myPanoViewer");
        var panoViewer = new PanoViewer(container, {
            image: "param_image",
            projectionType: "param_type",
            useZoom: param_useZoom,
            yawRange: param_yawRange, /* horizontal FOV by degree is 360. */
            pitchRange: param_pitchRange, /* vertical FOV by degree is 70. */
            fovRange: param_fovRange /* max fov should vertical FOV of the image.  */
        });
        
        var panoviewerSet = document.getElementById("panoSet");
        PanoControls.init(panoviewerSet, panoViewer, {enableGyroOption: true, enableTouchOption: true});
        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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118

  可进入JQueryFrame组件管理界面,将上述内容填写入模板中。此库由于引用了较多的外部的css与js文件,为保证其不被FastWeb框架影响,建议使用URLFrame容器引入。

# 3.3. 设置参数

  在参数界面中,设置上述参数,分别为其设置默认值:

# 3.4. 与数据库字段联动

  可以设置数据来源于数据库字段,此示例可留空不设置。

# 4. 设置文件

  全景浏览的示例使用的相片为球状全景图像,如需要自行设计球状全景图片,可参考以下方式进行设置。

  球状全景照片可使用支持360度拍摄的全景相机来进行拍摄。也可以自行使用照相机来拍摄。接下来介绍如何规划拍摄全景照片。

  在拍摄前,请先观察拍摄的环境,确定拍摄的相机要固定的位置,移走周边环境中会影响相机拍摄的物体,保持周边场景宽敞。

  准备带广角镜头的相机(单反相机+广角镜头或者带广角模式的手机也可)、三脚架、全景云台(推荐使用)。

  调整相机的相关参数以适应拍摄,主要有以下方面:

  • 调整相机镜头的对焦模式,建议使用手动对焦的模式,将对焦点调整至无限远,保证拍摄的全景图像远处的画面也能清晰可见。
  • 固定相机的焦距,在拍摄过程中不要变动焦距,否则会导致后期照片无法拼接。
  • 为保证相机成像的质量,在移动相机时要根据环境的变化调整到相机的感光度、曝光补偿、焦段、光圈值。

  架设相机三脚架,将脚架调整至水平状态,安装云台至脚架上,调整其为水平。打开云台调整云台至垂直方向,将相机安装至云台上,将相机调整至垂直向下,以刻度垂直线为参考线确保相机垂直中心点与参考线平行,校准后,将云台臂杆向地面垂直调整至向地面平行,调整相机,确保相机水平方向与地面平行。

  接下来开始拍摄,主要的拍摄有以下角度:水平、上斜、下斜、补天、补地。水平调节的角度为0°,上斜调整角度为向上35°,下斜角度为向下35°。

  水平、上斜、下斜的方向上均拍摄六张照片,可查看云台或其他辅助设备,分别在刻度为0°、60°、120°、180°、240°、300°的位置上拍摄一张照片。共计水平六张为一组,上斜六张为一组、下斜六张为一组,拍摄十八张照片。

  补天拍摄。调整云台刻度为垂直向上90°,垂直对准天空拍摄一张,补天一张为一组。

  补地拍摄。调整云台角度为地面方向,调整刻度为垂直向下90°,找准三脚架的中心点位置,以脚架中心点为轴心点,水平方向180°移动脚架,将屏幕中心点正对轴心点,每180°拍摄一张,补地两张为一组。

  将拍摄的图片导入至PTGui中,使用球形拼接模式导出即可获得适用于全景显示的界面。最终导入项目的全景图片建议宽度与高度压缩至4000*2000以下,避免在移动设备上查看相关内容时出现无法查看的情况。

3D球形实景-全景视频
3D球形实景-全景漫游

← 3D球形实景-全景视频 3D球形实景-全景漫游→

Copyright © 2021-2025 爱招飞IsoFace | ALL Rights Reserved
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式