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物體實景-公轉瀏覽→