DataV：模型查看器

圖表樣式

模型查看器是基於DataV團隊自研webgl可視化渲染引擎datav.vangogh的三維動畫模型載入器。組件支援載入gltf和glb格式模型、PBR貼圖、執行個體化mesh解析、沈浸式動畫編輯器、選擇多種光源和後期特效配置。

樣式面板

• 搜尋配置：單擊樣式面板右上方的搜尋配置項表徵圖，可在搜尋配置面板中輸入您需要搜尋的配置項名稱，快速定位到該配置項，系統支援模糊比對。詳情請參見搜尋配置項。

  • 尺寸：包括組件的寬度和高度，單位為px。

  • 定位：包括組件的橫座標和縱座標，單位為px。橫座標為組件左上方距離頁面左邊界的像素距離，縱座標為組件左上方距離頁面上邊界的像素距離。

  • 旋轉：以組件的中心為中心點，進行旋轉，單位為度（°）。

    • 手動輸入角度值，控制組件的旋轉角度。

    • 單擊表徵圖，控制組件左右翻轉樣式。

    • 單擊表徵圖，控制組件上下翻轉樣式。

  • 不透明度：取值範圍為0~1。為0時，圖表隱藏；為1時，圖表全部顯示。預設為1。

• 相機

  參數	說明
  相機類型	設定模型查看時相機的類型，包括透視相機和正視觀景窗。
  視角	相機視角的fov值，指的是模型視野範圍的角度值。拖動滑塊調整視角的角度值大小，取值範圍為0.1~180。相機類型選擇為透視相機時顯示當前欄位。
  相機位置	模型查看器內相機在X、Y和Z軸方向上的位置。拖動滑塊調整相機在三個方向軸上的位置值大小，取值範圍為-1000~1000。
  目標位置	模型查看器內相機在X、Y和Z軸方向上的朝向位置。拖動滑塊調整相機在三個方向軸上的朝向位置值大小，取值範圍為-1000~1000。

• 模型

  參數	說明
  模型地址	模型地址配置項中預設配置一個模型地址URL連結。如您對預設配置模型不滿意，可自訂上傳所需模型。上傳方式有兩種： 方法一：在模型地址右側連結輸入框內直接自訂輸入所需模型的URL地址。 方法二：單擊地址輸入框下方虛線框內的更改，在彈窗的請選擇需要更改的資源對話方塊內，選擇一個官方設計資源中的模型或我的設計資源中已上傳的自訂模型，也可直接單擊我的設計資源中的表徵圖，上傳一個本地模型。更改模型設計資產詳細功能請參見使用介面功能說明。
  顯示模式	開啟開關，開啟線框模式效果，可以在原模型紋理上疊加指定的純色線框樣式。 線框寬度：拖動滑塊，調整線框的寬度粗細值。 線框顏色：設定線框的顏色。 PBR通道顯示模式：模型查看器支援模型的PBR貼圖顯示，目前除了基礎色外只支援Metal-Roughness（金屬度-粗糙度）。單擊PBR通道顯示模式下拉框，選擇查看模型的PBR通道中的各個貼圖樣式，可供查看的貼圖樣式可選最終、基礎色、AO、金屬度、粗糙度、法線和發光。
  渲染效果	模型的渲染效果樣式，包括： 陰影設定：設定模型的陰影樣式，通過開啟或關閉發射陰影和接收陰影的開關，控制模型的陰影製作效果樣式。 說明 發射陰影（cast shadow）表示對其他mesh投射陰影，接收陰影（receive shadow）表示顯示其他mesh的投影。若需要模型本身顯示mesh之間前後產生的陰影製作效果，則這兩個陰影配置項需要同時開啟；若只是想在檢視平面上顯示模型整體的陰影，就只需要開啟發射陰影配置項即可，減少渲染效能損耗。 只開啟發射陰影製作效果圖 發射和接受陰影均開啟效果圖 不透明度：拖動滑塊，調整模型整體的不透明度。 說明 設定不透明度的功能，可能會影響到後處理中部分效果不顯示，如果真需要模型部分對象是半透明的情況，更推薦在建模軟體中提前將材質調整好。
  變換配置	位置：拖動滑塊，即可調整模型在X軸、Y軸和Z軸方向的位置，取值範圍為-1000~1000。 旋轉：拖動滑塊，即可調整模型在X軸、Y軸和Z軸方向的選擇角度，取值範圍為0~100。 縮放：拖動滑塊，即可調整模型在X軸、Y軸和Z軸方向的縮放大小，取值範圍為0~100。

• 動畫

  參數	說明
  模型動畫	開啟開關，開啟播放模型動畫的效果，組件動畫支援載入模型本身的動畫（morph動畫和骨骼動畫均支援）。 單動畫模型：單擊開啟動畫模型開關，即可一鍵開啟動畫播放效果。 多動畫模型：當模型擁有多個動畫效果時，開啟動畫模型後，預設播放模型列表上第一個動畫，如您想要選擇其他動畫內容，可以單擊使用相機位置及動畫設定功能，指定選擇所需的動畫內容。 說明 動畫詳情配置請選擇單擊相機位置及動畫設定，進入沈浸式編輯器內查看動畫模式。 具體在沈浸式編輯器模式中配置動畫詳情的步驟如下： 單擊畫布編輯器內模型組件右上方的相機位置及動畫設定按鍵，開啟設定對話方塊。 在對話方塊內，您可以單擊自動校準，將模型置於中心位置。 單擊開啟動畫的自動播放開關，開啟自動播放效果，並且可以自訂預覽或停止多動畫模型的動畫播放效果。 在對話方塊左側模型預覽面板，您可以拖動模型，調整模型的相機視角，選擇一個最佳角度來展示模型。 單擊預設動畫右側的下拉框，即可開啟模型播放清單中的所有動畫內容，選擇您所需播放的某個動畫內容即可指定模型的預設播放動畫。 單擊表徵圖和表徵圖，開啟動畫預覽或關閉動畫預覽功能。 完成指定動畫選擇後，您可以單擊下方的退出並儲存設定表徵圖或右上方的表徵圖，即可退齣動畫設定對話方塊。
  掃光動畫	單擊左側的表徵圖，開啟開關，即可配置模型額外疊加掃光動畫效果，多種掃光配置項更能定製呈現酷炫效果。 鋒面類型：可選平面和曲面兩種類型。 掃描軸向：選擇一個掃光動畫掃描的軸方向，可選X軸、Y軸和Z軸。 正負方向：選擇一個掃光動畫的方向，可選正向和負向。 顏色：設定掃光動畫效果的顏色。 掃光長度：拖動滑塊，設定掃光動畫的掃光長度值，取值範圍為0~100。 掃光速度：拖動滑塊，設定掃光動畫的掃光長速度值，取值範圍為0~100。
  繞軸旋轉	單擊左側的表徵圖，開啟開關，即可配置模型繞軸旋轉的效果。 旋轉軸：選擇旋轉軸的類型，可選X軸、Y軸、Z軸和自訂軸。 方向：設定繞軸旋轉的方向，可選逆時針和順時針。 轉速：拖動滑塊，設定繞軸的轉速值。

• 環境與光照

  參數	說明
  背景	模型查看器內為了應對不同的使用情境，對模型的背景要求也不同，組件提供了3種背景類型的顯示方式。 無：您可以選中背景配置項中的無選項或者關閉背景開關，即可不顯示背景樣式，畫布內就可顯示圖層在模型查看器組件下方的組件。 顏色：選中該選項後，您可以設定模型查看器組件的背景為純色，所選背景顏色和半透明度可均自訂調整。 環境貼圖：選中該選項後，即可用於顯示環境的貼圖內容，以便更好的觀察環境貼圖的樣式變化。
  環境貼圖	單擊左側的表徵圖，開啟開關，即可配置模型背景環境貼圖樣式的效果，環境貼圖基於映像的光照，目前僅支援HDR格式。 環境貼圖：您可以自訂輸入貼圖的URL連結或者在下方圖片框內自訂更改貼圖類型的設計資產內容，DataV系統提供了十種類型的貼圖樣式。 方向：拖動滑塊，調整環境貼圖的方向，取值範圍為0~360，單位度。 強度：拖動滑塊，調整環境貼圖的強度值，取值範圍為0~5。
  環境光線	環境光線的效果是均勻照亮所有物體，不產生陰影。單擊右側的或表徵圖，添加或刪除一個環境光線系列。 單擊或表徵圖配置多個環境光線系列的排列樣式。單擊表徵圖，即可複製當前選中環境光線系列配置內容並新增一個同樣配置的環境光線系列樣式。 顏色：該系列下環境光線的顏色。 強度：該系列下環境光線的強度值，取值範圍0~10。 重要 若模型材質金屬度為1，整個組件的光源只有環境光線的時候，模型顯示是全黑的。
  平行光	平行光是可設定用於產生陰影的唯一光源，平行光朝向方向（目標點）預設是模型的原點。單擊右側的或表徵圖，添加或刪除一個平行光系列。 單擊或表徵圖配置多個平行光系列的排列樣式。單擊表徵圖，即可複製當前選中平行光系列配置內容並新增一個同樣配置的平行光系列。 顏色：該系列下平行光的顏色。 強度：該系列下平行光的強度值，取值範圍0~10。 位置：該系列下平行光在X、Y和Z三個方向上的位置值。
  檢視平面	單擊左側的表徵圖，開啟開關，即可設定檢視平面的效果，可用於顯示模型陰影的平面。只有開啟並配置了平行光配置項，並且開啟模型 > 渲染效果 > 陰影設定 > 發射陰影配置項時，檢視平面配置項生效，才會顯示陰影。 平面顏色：設定檢視平面的平面顏色。 陰影顏色：設定檢視平面的陰影部分顏色。 邊緣淡出：拖動滑塊，設定陰影邊緣淡出的效果，取值範圍為0~10。 高度：拖動滑塊，設定陰影的高度值，取值範圍為-5~5。 尺寸：拖動滑塊，設定陰影的尺寸大小值，取值範圍為1~10。 不透明度：設定檢視平面的不透明度。

• 後處理：後期處理是一種全屏特效，結合數位影像處理技術對渲染畫面輸出到螢幕前進行再加工，類似於濾鏡的效果，達到提升視效目的。

  參數	說明
  消除鋸齒類型	預設配置下模型查看器的消除鋸齒類型是FXAA方法，您還可以選擇SSAA方法，但是SSAA方法開銷會比FXAA方法大很多，電腦效能不是特別優秀的前提，不建議選擇。
  銳利化暈影	銳利化暈影是一種將畫面銳利化和鏡頭暈影結合的後期效果配置項，適當的鏡頭暈影和銳利化顆粒會讓畫面呈現齣電影質感。單擊銳利化暈影左側的表徵圖，即可開啟配置項開關。 銳利度：拖動滑塊，調整銳利度的值，數值越大，畫面越銳利。 暈影半徑：拖動滑塊，調整暈影半徑的大小值，數值越大，暈影半徑越大，暗角越小。 暈影柔和度：拖動滑塊，調整暈影柔和度的值，數值越大，暈影暗角過渡效果越明顯。 顆粒度：拖動滑塊，調整顆粒度的值，數值越大，畫面顆粒感更強。
  SSR	SSR即螢幕空間反射，是類比光線和情境物體相互作用形成的反射，可以產生微妙的效果，越光滑的平面效果越清晰。單擊SSR左側的表徵圖，即可開啟配置項開關。 反射範圍：拖動滑塊，調整反射範圍的範圍值，數值越大，範圍越大，反射品質降低。 光線步進次數：拖動滑塊，調整反射光線步進次數的值，數值越大，反射品質越高，計算開銷越大。 光線步長：拖動滑塊，調整反射光線步長的值，數值越大，光線能觸及的情境範圍更大。 反射面光澤度：拖動滑塊，調整反射面光澤度的值，數值越大，表示平面越光滑，反射成像更清晰。 模糊度：拖動滑塊，調整反射模糊度的值，數值越大，成像越模糊。
  AO陰影	AO陰影為螢幕環境光線遮蔽效果，通過每個像素點及其相鄰像素的資訊，計算相互之間的遮擋關係，增強邊緣輪廓和縫隙處陰影的明暗效果，從而達到增強畫面立體感的效果。單擊AO陰影左側的表徵圖，即可開啟配置項開關。 位移：拖動滑塊，調整AO陰影位移值的大小，數值越大，陰影位移變大。 AO強度：拖動滑塊，調整AO強度的值，即可指數級調整明暗強度對比。 銳利度：拖動滑塊，調整銳利度的值，數值越大，越銳利。 AO半徑：拖動滑塊，調整AO半徑的大小值，計算鄰近遮擋關係範圍，數值越大，範圍越大。 模糊強度：拖動滑塊，調整AO陰影模糊強度的值，數值越大，陰影越平滑，開銷越大。
  鏡頭虛化	設定鏡頭虛化產生畫面虛化效果。單擊鏡頭虛化左側的表徵圖，即可開啟配置項。 模糊度：拖動滑塊，調整鏡頭虛化模糊度的值，數值越大，畫面越模糊。 光圈大小：拖動滑塊，調整鏡頭虛化光圈的大小值，數值越小，畫面越清晰。 焦距：拖動滑塊，調整鏡頭虛化焦距的值，數值越大，畫面越模糊。 焦點大小：拖動滑塊，調整鏡頭虛化焦點大小的值，數值越大，畫面越模糊。
  輝光	設定輝光可以增強畫面的明暗對比，畫面中亮度越大的地方會產生外光暈效果。單擊輝光左側的表徵圖，即可開啟配置項。 遮罩：開啟開關，即可設定遮罩超過模型範圍的外光暈效果。 強度：拖動滑塊，調整輝光向外光暈的強度值，數值越大，向外越擴張。 亮度：拖動滑塊，調整輝光亮度的值，數值越大，輝光越亮。 亮度閾值：拖動滑塊，調整輝光亮度閾值，數值越大，輝光效果越不明顯。 平滑寬度：拖動滑塊，調整輝光平滑寬度的值，數值越大，輝光過度越平滑。 光斑半徑：拖動滑塊，調整光斑半徑的值，數值越大，光斑效果越明顯。
  移動模糊	設定移動模糊可以用來類比快速運動的物體模糊拖動效果。單擊移動模糊左側的表徵圖，即可開啟配置項。 模糊度：拖動滑塊，調整移動模糊度的值，數值越大越模糊。 運動速率：拖動滑塊，調整運動速率的值，數值越大越模糊。
  顏色校正	設定顏色校正樣式，可對最終輸出畫面進行色調、飽和度、亮度、對比的調整。 色調：拖動滑塊，調整色調的值，數值越大，畫面色調越暖。 飽和度：拖動滑塊，調整飽和度的值，數值越小，畫面飽和度越大。 亮度：拖動滑塊，調整亮度的值，數值越大，畫面越亮。 對比：拖動滑塊，調整對比的值，數值越大，畫面對比越大。

資料來源面板

url：模型的URL連結。

進階面板

此組件沒有互動事件。

藍圖互動

1. 單擊頁面左上方的表徵圖，進入藍圖頁面。

2. 在圖層節點頁簽下，添加當前組件至主畫布中。

3. 查看藍圖配置參數。

   • 事件

     事件	說明
     當資料介面請求完成時	資料介面請求返回並經過過濾器處理後拋出的事件，同時拋出處理後的JSON格式的資料。具體資料樣本請參見畫布編輯器中組件右側配置面板資料來源頁簽的資料響應結果地區。

   • 動作

     動作	說明
     請求資料介面	重新請求服務端資料，上遊資料處理節點或圖層節點拋出的資料將作為參數。例如模型查看器配置了API資料來源為https://api.test，傳到請求資料介面動作的資料為{ id: '1'}，則最終請求介面為https://api.test?id=1。
     匯入資料介面	按組件繪製格式處理資料後，匯入組件，重新繪製。不需要重新請求服務端資料。具體資料樣本請參見畫布編輯器中組件右側配置面板資料來源頁簽的資料響應結果地區。
     畫布大小改變	畫布大小改變，動作傳入資料為number類型。
     動畫播放	動畫播放，動作傳入資料為object和string類型。
     動畫停止	動畫停止，動作傳入資料為object和string類型。
     移動	將組件移動到指定位置，參考資料樣本。 { // 移動方式。絕對位置：to，相對定位：by。預設值：to。 "positionType": "to", // 指定位置。x座標，y座標。 "attr": { "x": 0, "y": 0 }, // 動畫方式。 "animation": { "enable": false, // 動畫延時。 "animationDuration": 1000, // 動畫曲線。可選值為：linear|easeInOutQuad|easeInOutExpo。 "animationEasing": "linear" } }
     切換顯隱	切換組件顯示或者隱藏，不需要參數。
     顯示	顯示組件，參考資料樣本。 { "animationType": "",//動畫方式，可選值：fade，不填無動畫。 "animationDuration": 1000,//動畫延遲，單位ms。 "animationEasing": ""//動畫曲線 }
     隱藏	隱藏組件，參考資料樣本。 { "animationType": "",//動畫方式，可選值：fade，不填無動畫。 "animationDuration": 1000,//動畫延遲，單位ms。 "animationEasing": ""//動畫曲線 }
     更新群組件配置	動態更新組件的樣式配置。需要先在組件的樣式面板中，單擊複製配置到剪貼簿，擷取組件配置資料。再根據需要在藍圖編輯器配置頁面的資料處理節點中更改對應樣式的欄位值。