愛招飛幫助手冊 愛招飛幫助手冊
  • FastERP-1
  • Smart
  • PinToo
  • FastWeb
  • FastERP-2 企業管理系統 (opens new window)
  • 印染業ERP (opens new window)
  • 工廠終端機 (opens new window)
  • TARS
  • MARS
  • TaskRunner
  • Flying
  • FastDesk
  • HiDesk
  • HiNAT
  • FastBPM
  • 設備故障診斷 (opens new window)
  • 設備最佳運轉效益 (opens new window)
  • 企業智能助手SmeGPT (opens new window)
  • 燈號管理 (opens new window)
  • 戰情室 (opens new window)
  • 能源管理 (opens new window)
  • 人車定位 (opens new window)
  • 戰情指揮系統 (opens new window)
  • FastERP-1
  • FastWeb
  • Smart
  • PinToo
  • Flying
  • TARS
  • 通用功能

    • Report
    • Script
    • Echarts
    • Chart
    • DB Install
  • FastERP-1
  • Smart
  • PinToo
  • FastWeb
  • FastERP-2 企業管理系統 (opens new window)
  • 印染業ERP (opens new window)
  • 工廠終端機 (opens new window)
  • TARS
  • MARS
  • TaskRunner
  • Flying
  • FastDesk
  • HiDesk
  • HiNAT
  • FastBPM
  • 設備故障診斷 (opens new window)
  • 設備最佳運轉效益 (opens new window)
  • 企業智能助手SmeGPT (opens new window)
  • 燈號管理 (opens new window)
  • 戰情室 (opens new window)
  • 能源管理 (opens new window)
  • 人車定位 (opens new window)
  • 戰情指揮系統 (opens new window)
  • FastERP-1
  • FastWeb
  • Smart
  • PinToo
  • Flying
  • TARS
  • 通用功能

    • Report
    • Script
    • Echarts
    • Chart
    • DB Install
  • FastWeb幫助主頁
  • 學習手冊

    • 基本入門

    • 功能介紹

    • 控制元件說明

    • 系統工具

    • 系統管理

    • 云服務工具

    • 資料庫工具

    • 專用模板

    • 外部功能

    • 開發流程

      • 開發案例
      • 紡織印染業ERP設計實務
      • 頁面佈局
      • URLFrame與JS的互動
      • 自定控制元件擴充套件

        • 多用途-圓形-指針儀表盤
        • 多用途-半圓形-指針儀表盤1
        • 多用途-半圓形-指針儀表盤2
        • 溫度-垂直-刻度計
        • 方向-圓形-指南針
        • 3D物體實景-自轉瀏覽
        • 3D物體實景-公轉瀏覽
          • 1. 下載示例
          • 2. 確認參數
          • 3. 修改模板
            • 3.1. 本地化處理
            • 3.2. 標記參數
            • 3.3. 設定參數
            • 3.4. 與資料庫欄位聯動
          • 4. 設定檔案
            • 4.1. 拍攝照片的技巧
        • 3D平移實景-室內瀏覽
        • 3D平移實景-室外瀏覽
        • 互動-SVG-HMI元件
        • 瀏覽-照片-顯示元件
        • 氣壓-圓形-指針氣壓計1
        • 3D圓柱實景-風景瀏覽
        • 3D球形實景-熱點追蹤
        • 3D球形實景-全景視訊
        • 3D球形全景-汽車內飾
        • 3D球形實景-全景漫遊
      • RestAPI擴充套件

      • IsoBean開發

    • 函式程式

  • 開發手冊

目录

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/1800/q35/https://scaleflex.cloudimg.io/crop/1920x700/n/https://cdn.scaleflex.it/demo/360-car/"
      data-filename="iris-{index}.jpeg"
      data-amount="36"
      data-magnifier="3"
      data-bottom-circle
      data-bottom-circle-offset="5"
      data-keys
      data-autoplay
      data-spin-reverse></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

  基礎示例使用的語句為以上內容,其中可注意到其主要的參數均在<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/iris/目錄下。

  使用編輯器打開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"
      data-bottom-circle
      data-bottom-circle-offset="5"
      data-keys
      data-autoplay
      data-spin-reverse></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

  至此,模板內容已設定完成,可進入JQueryFrame元件管理界面,將上述內容填寫入模板中。

# 3.3. 設定參數

  在參數界面中,設定上述參數,分別為其設定預設值:

# 3.4. 與資料庫欄位聯動

  此示例無需與資料庫欄位聯動,此部分請留空。

# 4. 設定檔案

  在本示例中引入的圖片通常為自定義的照片,照片的拍攝及放置請參考以下的說明。

# 4.1. 拍攝照片的技巧

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

  使用公轉視角拍攝的物體一般體積較大,不便於通過被攝物體的自轉實現全景拍攝,需要通過相機位置的圓周運動來實現,故拍攝的場地要儘量保持光線穩定,背景結構簡單,場地寬敞,避免背景的光線、場景的劇烈變化導致拍攝的照片序列忽明忽暗或背景雜亂。此處可根據拍攝物體的高度來確定拍攝的間距,可通過前後移動相機,觀察取景器中的被攝物體,直至被攝物體在取景器中完全顯示。

  拍攝前請先確定好拍攝的物體的放置位置,以放置的物體的投影面圖形的中心點為圓心,設定一個合適的半徑長度,在四周畫圓。旋轉的半徑長度建議大於2倍的被攝物體的最長處的長度,根據拍攝的照片數量等分圓心角,在圓周上確定圓心角的等分點,這些點將作為相機的拍攝固定點,畫的圓以及固定點請使用與地面顏色相近的標記,避免被拍攝進入成片中。保持相機的鏡頭中心的方向始終對準圓心位置,沿著圓周移動相機,觀察在相機移動過程中是否可以保證取景器中完整顯示被攝物體,如果在某個特定旋轉角度下仍不能顯示完整,建議再向后移動相機直至完全顯示,並重新確定圓周線及拍攝點,按照此方式相機移動一週,移動完成後,確定拍攝點的位置,使用三腳架進行相機位置固定。使用三腳架是爲了能讓拍攝的照片處於同一基準線上,避免成片序列的基準不齊導致的界面上下晃動。基準線應設定為被攝物體最高處的一半高度,在取景器中水平線應與被攝物體的基準線齊平。可通過調整三腳架的高度或者調節相機的俯仰角度來設定基準線。

  在拍攝過程中要保持光線亮度,光照方向等的恒定。建議使用固定光源對商品進行照射,亮度調整至相機可以實現正常曝光的範圍內。再進行旋轉,觀察是否會出現商品被大面積陰影覆蓋的情況,如有,則調整固定光源的位置或增加固定光源的數量,以減少或消除陰影。旋轉一週消除后,調整光源的色溫在暖白光與正白光的色溫範圍(4000K-6500K)。

  在拍攝方向的背景部分鋪設背景板,請勿選擇與被攝物體顏色相似的背景板。在相機的取景範圍內鋪滿背景板,背景板不要有褶皺的痕跡。

  拍攝系列照片時請注意保持照相機的光圈,焦距等參數為恒定值,且儘量使用較小的光圈來拍攝物體,調節相機的ISO,快門速度等來保持正常曝光,能使被攝物體的每個細節都被清楚記錄。

  在相機沿圓周移動至下一個指定的拍攝位置后,停止移動,將相機鏡頭對準圓周中心軸,並拍攝照片。如果需要最終的預覽效果順滑,建議至多每旋轉10°拍攝一張照片。每個固定角度的照片建議拍攝數張,便於後期進行篩選。

  拍攝的照片導出后檢查拍攝的照片序列是否曝光、拍攝位置等保持一致,如一致的話根據拍攝的數張照片選擇效果最佳的照片,將最終選擇的照片重新按序號進行命名。檔名的命名的規則要與data-filename中的參數一致。將{index}的部分替換為序號即可。

  調整要導出的照片的解析度大小,建議使用的解析度寬與高均不超過1000畫素。照片的大小不超過500KB。

  將最終導出的照片序列放入目錄,目錄的路徑要與data-folder中的參數保持一致。放入的照片數量與data-amount中指定的數值一致。

3D物體實景-自轉瀏覽
3D平移實景-室內瀏覽

← 3D物體實景-自轉瀏覽 3D平移實景-室內瀏覽→

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