3D平移实景-室外浏览

# FastWeb 3D平移实景-室外浏览

项目地址：https://github.com/scaleflex/js-cloudimage-360-view (opens new window)

js-cloudimage-360view是一个简单且互动性强的库，可用于虚拟展示产品的相关功能。

下面介绍的是拍摄室外全景的示例的引入方式以及介绍室外全景拍摄的注意事项。

# 1. 下载示例

点击https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2.7.1/js-cloudimage-360-view.min.js (opens new window)下载库文件，将其放置于FastWeb目录下library/js/js-cloudimage-360view中。在其下创建asset目录以及demo目录，分别用于放置库相关的文件以及示例图片文件。

# 2. 确认参数

新创建一个html文档，在其中设置以下内容：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
        <style>
            .cloudimage-360 .cloudimage-360-prev, .cloudimage-360 .cloudimage-360-next {
              padding: 8px;
              background: rgb(244, 244, 244);
              border: none;
              border-radius: 4px;
            }

            .cloudimage-360 .cloudimage-360-prev:focus, .cloudimage-360 .cloudimage-360-next:focus {
              outline: none;
            }

            .cloudimage-360 .cloudimage-360-prev {
              display: none;
              position: absolute;
              z-index: 100;
              top: calc(50% - 15px);
              left: 20px;
            }

            .cloudimage-360 .cloudimage-360-next {
              display: none;
              position: absolute;
              z-index: 100;
              top: calc(50% - 15px);
              right: 20px;
            }

            .cloudimage-360 .cloudimage-360-prev:before, .cloudimage-360 .cloudimage-360-next:before {
              content: '';
              display: block;
              width: 30px;
              height: 30px;
              background: 50% 50% / cover no-repeat;
            }

            .cloudimage-360 .cloudimage-360-prev:before {
              background-image: url('library/js/js-cloudimage-360-view/asset/arrow-left.svg');
            }

            .cloudimage-360 .cloudimage-360-next:before {
              background-image: url('library/js/js-cloudimage-360-view/asset/arrow-right.svg');
            }

            .cloudimage-360 .cloudimage-360-prev.not-active, .cloudimage-360 .cloudimage-360-next.not-active {
              opacity: 0.4;
              cursor: default;
            }
        </style>
  </head>
  <body>
        <div
           class="cloudimage-360"
           data-folder="https://cdn.scaleflex.it/demo/outdoor/"
           data-filename="00_Haus_000{index}.jpg"
           data-amount="30"
           data-magnifier="3"
           data-ratio="0.5"
           data-stop-at-edges
           data-spin-reverse
           data-control-reverse
        >
          <button class="cloudimage-360-prev"></button>
          <button class="cloudimage-360-next"></button>
        </div>
        <script src="library/js/js-cloudimage-360-view/js-cloudimage-360-view.min.js"></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

基础示例使用的语句为以上内容，其中可注意到其主要的参数均在<div>中，比如data-folder，data-filename，data-amount，data-magnifier等选项。

class表示js-cloudimage-360 视图库的选择器，此项为必选项且只有cloudimage-360。
data-folder必选项，表示为图片文件所在的目录。
data-filename表示为图片文件的名称，名称以序号进行排列，序号部分以{index}为标记。
data-filename-y 表示为y轴方向上的图片文件名称，名称以序号进行排列，序号部分以{index}为标记。
data-amount表示为使用用于全景展示的文件的数量。
data-amount-y 表示为使用用于Y轴全景展示的文件的数量。
data-magnifier表示为使用放大镜时的放大倍率。
data-keys 是否启用键盘支持，通过按键盘上的箭头键支持360度旋转。此项为可选项，默认设置为false，参数中填写此项表示此项设置为true。
data-autoplay 加载时是否自动播放360旋转视图。此项为可选项，默认设置为false，参数中填写此项表示此项设置为true。
data-play-once 在启用自动播放的状态下，设置是否仅播放一次便停止自动播放。此项为可选项，默认设置为false，参数中填写此项表示此项设置为true。
data-autoplay-behavior 设置自动播放下的播放行为。spin-x表示为横向旋转，spin-y表示为纵向旋转，spin-xy表示为先横向旋转后纵向旋转，spin-yx表示为先纵向旋转后横向旋转。
data-full-screen 加载时是否以全屏模式打开视图。此项为可选项，默认设置为false，参数中填写此项表示此项设置为true。
data-magnifier-in-fullscreen 设置在全屏模式下是否启用放大功能。此项为可选项，默认设置为false，参数中填写此项表示此项设置为true。
data-ratio 设置是否防止页面跳转。
data-autoplay-reverse加载时自动播放360反向旋转视图。
data-disable-drag 设置是否禁用鼠标的拖拽功能。此项为可选项，默认设置为false，参数中填写此项表示此项设置为true。
data-speed 更改自动播放帧的间隔（以毫秒为单位）。
data-drag-speed 在拖动事件上更改帧的速度因子。
data-spin-reverse 旋转方向，默认情况下它使用逆时针方向（图像索引从1到末尾的数据值）。
data-box-shadow 是否为容器应用框阴影。此项为可选项，默认设置为false，参数中填写此项表示此项设置为true。
data-bottom-circle 是否在容器底部显示360视图提示。此项为可选项，默认设置为false，参数中填写此项表示此项设置为true。
data-bottom-circle-offset 设置底部360表示线的偏移量。
data-hide-360-logo 设置是否隐藏360展示的logo。此项为可选项，默认设置为false，参数中填写此项表示此项设置为true。
data-logo-src 设置可展示的logo的地址。
data-control-reverse 在使用鼠标操作时是否设置为反向旋转。
data-stop-at-edges 在图像加载图片序列时不进行首尾相接，即加载至图像首或者尾时停止转动显示。使用此设置后，会在图像界面的两侧显示方向控制按钮。
data-index-zero-base 在文件名上留下零填充。例如：index-zero-base="4" => 图像索引将为“0004”。
data-lazyload 将仅加载靠近客户端视口的360度视图图像，从而加快页面加载时间。如果设置为true，则必须包含其他脚本。

data-image-list 设置添加图片的方式，用以替代folder与filename。

示例：

data-folder="https://scaleflex.airstore.io/demo/360-car/"
data-image-list='[
"iris-1.jpeg",
"iris-4.jpeg",
"https://scaleflex.airstore.io/demo/360-car/iris-12.jpeg",
"https://scaleflex.airstore.io/demo/360-car/iris-15.jpeg"
]’

1
2
3
4
5
6
7

data-disable-pointer-zoom 禁用桌面模式下的指针缩放。此项为可选项，默认设置为false，参数中填写此项表示此项设置为true。
data-disable-pinch-zoom 在移动设备上禁用双指缩放。此项为可选项，默认设置为false，参数中填写此项表示此项设置为true。
data-to-start-pointer-zoom 开始指针缩放的事件，可选项为scroll(滚轮滚动)、click(鼠标点击事件)，默认选项为click。
data-on-mouse-leave 鼠标离开容器后调用的函数。可选项为resetZoom多个函数之间可用;隔开，默认选项为none。
data-pointer-zoom-factor 指针缩放的比例因子。默认值为2。
data-pinch-zoom-factor 捏缩放比例因子。默认值为2。
data-max-scale 使用指针或捏合缩放可以调整图像的最大比例。默认值为none。
data-lazyload-selector 根据您选择的库应用延迟加载。默认情况下，延迟加载不包含在js-cloudimage-360-view中。有很好的库可以实现这一目标。如果在配置中启用延迟加载，则需要添加一个额外的库，如lazysizes，yall.js（Yet Another Lazy Loader），lozad.js来处理它。

要保存API调用，可以使用以下库来处理

<!---CDN链接到js-cloudimage-360-view 1.1.0 + lazysizes 4.1.7--->
<script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-360-view/v2.0.0.lazysizes.min.js"></script>

<!--CDN链接到js-cloudimage-360-view 1.1.0 + yall.js 3.1.1-->
<script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-360-view/v2.0.0.yall.min.js"></script>

<!--CDN链接到js-cloudimage-360-view 1.1.0 + lozad.js 1.9.0-->
<script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-360-view/v2.0.0.lozad.min.js"></script>

1
2
3
4
5
6
7
8

如果拍摄的照片内容可实现360度查看，需要启用360度循环查看的，请将data-stop-edges选项删除。

以上的参数我们先仅使用data-folder与data-filename，分别将参数命名为param_folder与param_filename。

# 3. 修改模板

# 3.1. 本地化处理

以上模板处还有需要进行更改的地方。

接下来开始下载图片文件。打开上述制作的html文件，按下F12打开浏览器的开发者选项，选择Network，过滤选项选择Img，刷新页面后，依次点击加载的图片(30张)分别保存到demo/outdoor/目录下。文件名以00_Haus_000{index}.jpg进行命名排序。

使用编辑器打开js-cloudimage-360-view.min.js，搜寻其中包含有e.style.background =字样的内容，将其中的url部分里的链接对应的文件下载下来放置于asset文件夹中。

然后将所有的地址部分的url修改为本地地址，即文件名前面的URL部分路径均改成library/js/js-cloudimage-360-view/asset。

# 3.2. 标记参数

根据预设，将html模板中的参数分别使用上述设置的名称进行替换。替换后显示的内容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
        <style>
            .cloudimage-360 .cloudimage-360-prev, .cloudimage-360 .cloudimage-360-next {
              padding: 8px;
              background: rgb(244, 244, 244);
              border: none;
              border-radius: 4px;
            }

            .cloudimage-360 .cloudimage-360-prev:focus, .cloudimage-360 .cloudimage-360-next:focus {
              outline: none;
            }

            .cloudimage-360 .cloudimage-360-prev {
              display: none;
              position: absolute;
              z-index: 100;
              top: calc(50% - 15px);
              left: 20px;
            }

            .cloudimage-360 .cloudimage-360-next {
              display: none;
              position: absolute;
              z-index: 100;
              top: calc(50% - 15px);
              right: 20px;
            }

            .cloudimage-360 .cloudimage-360-prev:before, .cloudimage-360 .cloudimage-360-next:before {
              content: '';
              display: block;
              width: 30px;
              height: 30px;
              background: 50% 50% / cover no-repeat;
            }

            .cloudimage-360 .cloudimage-360-prev:before {
              background-image: url('library/js/js-cloudimage-360-view/asset/arrow-left.svg');
            }

            .cloudimage-360 .cloudimage-360-next:before {
              background-image: url('library/js/js-cloudimage-360-view/asset/arrow-right.svg');
            }

            .cloudimage-360 .cloudimage-360-prev.not-active, .cloudimage-360 .cloudimage-360-next.not-active {
              opacity: 0.4;
              cursor: default;
            }
        </style>
  </head>
  <body>
        <div
           class="cloudimage-360"
           data-folder="param_folder"
           data-filename="param_filename"
           data-amount="30"
           data-magnifier="3"
           data-ratio="0.5"
           data-stop-at-edges
           data-spin-reverse
           data-control-reverse
        >
          <button class="cloudimage-360-prev"></button>
          <button class="cloudimage-360-next"></button>
        </div>
        <script src="library/js/js-cloudimage-360-view/js-cloudimage-360-view.min.js"></script>
  </body>
</html>

至此，模板内容已设置完成，可进入JQueryFrame组件管理界面，将上述内容填写入模板中。

# 3.3. 设置参数

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

# 3.4. 与数据库字段联动

此示例无需与数据库字段联动。此部分请留空设置。

# 4. 设置文件

在本示例中引入的图片通常为自定义的照片，照片的拍摄及放置请参考以下的说明。

# 4.1. 拍摄照片的技巧

拍摄照片需要注意以下方面。

此类型的照片拍摄时通常会在户外进行，在拍摄时为保持被拍摄物的光线强度恒定，请在合适的时间进行拍摄，在拍摄时请注意避免阳光的逆光直射，如有条件，可选择在阴天或者雨天进行拍摄。

使用三脚架进行相机位置固定。使用三脚架是为了能让拍摄的照片处于同一基准线上，避免成片序列的基准不齐导致的界面上下晃动。基准线应设置为被摄物体取景最为丰富的高度，在取景器中水平线应与被摄物体的基准线齐平。可通过调整三脚架的高度来设置基准线。

拍摄的此类物体通常无法移动，故圆周拍摄的方式并不适用，建议沿周边一定距离进行拍摄，在被摄物体的周边规划好拍摄的路径以及固定的拍摄点，每个拍摄的点应为固定间距，且拍摄点与被摄物体之间不应存在被遮挡的情形。

拍摄系列照片时请注意保持照相机的光圈，焦距等参数为恒定值，且尽量使用较小的光圈来拍摄物体，调节相机的ISO，快门速度等来保持正常曝光，能使被摄物体的每个细节都被清楚记录。光圈也不宜过小，应保证天空等背景细节不在对焦焦段范围内。

在相机移动至下一个指定的拍摄位置后，停止移动，将相机镜头对准要拍摄的位置，并拍摄照片。如果需要最终的预览效果顺滑，建议每移动较少的路径拍摄一张照片。每个固定角度的照片建议拍摄数张，便于后期进行筛选。

拍摄的照片导出后检查拍摄的照片序列是否曝光、拍摄位置等保持一致，如一致的话根据拍摄的数张照片选择效果最佳的照片，将最终选择的照片重新按序号进行命名。文件名的命名的规则要与data-filename中的参数一致。将{index}的部分替换为序号即可。

调整要导出的照片的分辨率大小，建议使用的分辨率宽与高均不超过1000像素。照片的大小不超过500KB。

将最终导出的照片序列放入目录，目录的路径要与data-folder中的参数保持一致。放入的照片数量与data-amount中指定的数值一致。

← 3D平移实景-室内浏览互动-SVG-HMI组件→