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元件→