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>
	</head>
	<body>
    <div
      class="cloudimage-360"
      data-folder="https://scaleflex.cloudimg.io/width/600/q35/https://cdn.scaleflex.it/demo/chair-360-36/"
      data-filename="chair_{index}.jpg?v1"
      data-amount="36"
      data-magnifier="3"
    ></div>        
        <script src="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

基础示例使用的语句为以上内容，其中可注意到其主要的参数均在<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

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

# 3. 修改模板

# 3.1. 本地化处理

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

接下来开始下载图片文件。打开上述制作的html文件，按下F12打开浏览器的开发者选项，选择Network，过滤选项选择Img，刷新页面后，依次点击加载的图片(36张)分别保存到demo/chair目录下。

使用编辑器打开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>
  </head>
  <body>
    <div
      class="cloudimage-360"
      data-folder="param_folder"
      data-filename="param_filename"
      data-amount="36"
      data-magnifier="3"
    ></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

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

# 3.3. 设置参数

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

# 3.4. 与数据库字段联动

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

# 4. 设置文件

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

# 4.1. 拍摄照片的技巧

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

选择一个合适的拍摄场地，拍摄商品的场地要尽量保证宽敞，此处可根据拍摄物体的高度来确定拍摄的间距，可通过前后移动相机，观察取景器中的被摄物体，直至被摄物体在取景器中完全显示，通过旋转转盘，观察在旋转过程中是否可以保证取景器中完整显示被摄物体，如果在某个特定旋转角度下仍不能显示完整，建议再向后移动相机直至完全显示。按照此方式旋转一周，旋转完成后，确定拍摄点的位置，使用三脚架进行相机位置固定。使用三脚架是为了能让拍摄的照片处于同一基准线上，避免成片序列的基准不齐导致的界面上下晃动。基准线应设置为被摄物体最高处的一半高度，在取景器中水平线应与被摄物体的基准线齐平。可通过调整三脚架的高度或者调节相机的俯仰角度来设置基准线。

在拍摄过程中要保持光线亮度，光照方向等的恒定。建议使用固定光源对商品进行照射，亮度调整至相机可以实现正常曝光的范围内。再进行旋转，观察是否会出现商品被大面积阴影覆盖的情况，如有，则调整固定光源的位置或增加固定光源的数量，以减少或消除阴影。旋转一周消除后，调整光源的色温在暖白光与正白光的色温范围(4000K-6500K)。

在拍摄方向的背景部分铺设背景板，请勿选择与被摄物体颜色相似的背景板。在相机的取景范围内铺满背景板，背景板不要有褶皱的痕迹。

拍摄系列照片时请注意保持照相机的光圈，焦距等参数为恒定值，且尽量使用较小的光圈来拍摄物体，调节相机的ISO，快门速度等来保持正常曝光，能使被摄物体的每个细节都被清楚记录。

建议使用带电动控制的电子转盘来旋转被摄物体，保持恒定的速度旋转，在旋转恒定的角度后，停止旋转并拍摄照片。如果需要最终的预览效果顺滑，建议至多每旋转10°拍摄一张照片。每个固定角度的照片建议拍摄数张，便于后期进行筛选。

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

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

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

← 方向-圆形-指南针 3D物体实景-公转浏览→