DataV：3D 模型資料看板搭建案例

案例介紹

本案例示範如何使用3D 模型建立PC端資料看板。首先，將高塔3D 模型資源匯入DataV-Board，使用模型查看器、通用標題、按鈕、Tab列表等組件，實現工業裝置的可視化展示。通過全域變數和藍圖編輯功能，實現3D 模型與組件的動態互動，單擊Tab列表可切換顯示模型資源，單擊按鈕可觸發模型動畫播放。完成本案例後，您將得到類似下圖的資料看板。

準備工作

開始本樣本前，您需完成以下準備工作：

• 開通DataV-Board專業版產品

• 準備模型資源

  本案例將使用高塔模型和液壓臂模型資源進行示範，您需將該資源下載至本地，後續上傳至DataV-Board使用。

  說明

  • 液壓臂模型資源將通過CDN進行擷取。

  • 案例提供的模型資源為範例資料，僅用於學習和交流。

• （可選）建立專案分組

  系統預設不提供分組，建立的專案會處於未分組狀態，您可按需建立專案分組。

操作流程

您可通過如下操作，完成3D 模型資料看板的建立，快速體驗DataV-Board的相關功能。

1. 步驟一：上傳模型資源

2. 步驟二：建立資料看板並匯入模型資源

3. 步驟三：設定3D 模型樣式

4. 步驟四：資料看板添加組件

5. 步驟五：添加全域變數

6. 步驟六：使用藍圖實現組件互動

7. 步驟七：預覽和發布資料看板

步驟一：上傳模型資源

上傳準備好的模型資源至設計資源，用於後續建立資料看板。

1. 登入DataV-Board控制台。

2. 在左側導覽列單擊資源管理下的設計資源，進入設計資源頁。

3. 單擊建立設計資源下的上傳模型，進入上傳模型頁。

4. 按照介面指引上傳準備好的模型資源，等待模型載入完成後，單擊完成。

步驟二：建立資料看板並匯入模型資源

建立一個空白畫布，匯入準備好的模型資源。

1. 建立資料看板。

   1. 在DataV-Board控制台中單擊全部應用 > 建立PC端看板。

   2. 在空白看板上單擊建立看板。

   3. 輸入看板名稱，使用預設的專案分組，單擊建立看板。

      本樣本看板名稱為工業裝置展示。

   看板建立後，將自動跳轉至畫布編輯器頁面，進行後續操作。

2. 在畫布編輯頁中添加模型查看器組件。

3. 在畫布中單擊組件，更改預設模型為您上傳的模型資源。

步驟三：設定3D 模型樣式

DataV-Board提供了豐富的模型樣式設定。下面將通過調整模型樣式，使模型更加具體和生動。

1. 單擊已匯入模型右上方的表徵圖進入沉浸態編輯，單擊自動校準，調整3D 模型的位置和鏡頭設定，達到滿意的模型展示角度。

2. 選擇3D 模型右側標籤欄的樣式，根據下圖的步驟，完成對3D 模型背景顏色的設定。

   

   說明

   DataV-Board提供了豐富的模型樣式設定，更多模型樣式配置詳情，請參見模型查看器。

步驟四：資料看板添加組件

模型樣式設定完成後，為資料看板添加通用標題、按鈕、Tab列表組件，豐富資料看板的展示效果。後續將使用組件實現互動功能。

1. 在左側導覽列中選擇組件庫，按照下圖步驟為3D 模型添加通用標題組件。單擊選中畫布中的組件，修改組件名稱為工業裝置展示，更改組件樣式配置。

2. 在左側導覽列中選擇組件庫，按照下圖步驟為3D 模型添加按鈕組件。單擊選中畫布中新添加的組件，修改組件名稱為開啟動畫，更改組件樣式配置。

3. 在左側導覽列中選擇組件庫，按照下圖步驟為3D 模型添加Tab列表組件，單擊選中畫布中新添加的組件，修改組件樣式配置。

   單擊Tab列表組件的資料來源標籤，為Tab列表替換準備好的資料來源。

   Tab列表組件資料來源代碼如下

   [
     {
       "id": "md1",
       "imgSrc": "https://img.alicdn.com/imgextra/i3/O1CN016hZVyj29jgY7SqaJn_!!6000000008104-55-tps-200-200.svg",
       "content": "高塔"
     },
     {
       "id": "md2",
       "imgSrc": "https://img.alicdn.com/imgextra/i4/O1CN01WR3zo21DiXqeRUJOm_!!6000000000250-55-tps-200-200.svg",
       "content": "液壓臂"
     }
   ]

   說明

   DataV-Board內建文本展示、常規圖表、多媒體展示、互動組件等100+圖表/表單模組，覆蓋常規需求。更多模型樣式配置詳情，請參見組件管理。

步驟五：添加全域變數

全域變數可以理解為參數變數，用於控制組件之間參數的傳遞，從而達到互動的目的。下面將添加模型配置和模型地址全域變數，用於後續在組件互動中擷取組件配置資訊。

1. 在導覽列左側選中圖層組件，按照下圖步驟，複製組件配置。

2. 在編輯器導覽列左側單擊全域變數下的建立變數，添加var_cam_arm和var_md_lib全域變數資料。

   var_cam_config

   {
     "md1": {  
       "options": {
         "model": {
           "url": "https://cdn-upload.datav.aliyun.com/upload/download/1729674610188-j2yNxK8G.glb",
           "viewMode": {
             "channel": "final",
             "wireframe": false,
             "wireframeType": "triangle",
             "wireframeColor": "#3c3c3c",
             "wireframeWidth": 0.73
           },
           "transform": {
             "scale": {
               "scaleX": 1,
               "scaleY": 1,
               "scaleZ": 1
             },
             "position": {
               "offsetX": 0,
               "offsetY": 0,
               "offsetZ": 0
             },
             "rotation": {
               "rotationX": 0,
               "rotationY": 0,
               "rotationZ": 0
             }
           },
           "renderEffect": {
             "shadow": {
               "castShadow": false,
               "receiveShadow": false
             },
             "opacity": 0.5
           }
         },
         "camera": {
           "fov": 45,
           "type": "perspective",
           "zoom": 1,
           "target": {
             "tx": 0,
             "ty": 0,
             "tz": 0
           },
           "position": {
             "px": 0.7945574069414394,
             "py": 1.2630150675219762,
             "pz": 12.39889675619276
           }
         },
         "lights": {
           "background": {
             "show": true,
             "type": "color",
             "color": "#000000"
           },
           "ambientLight": [
             {
               "color": "#1d65ff",
               "_active": true,
               "intensity": 2
             }
           ],
           "groundShadow": {
             "show": false,
             "size": 1,
             "height": 0,
             "opacity": 1,
             "boundary": 1,
             "groundColor": "#ffffff",
             "shadowColor": "#000000"
           },
           "directionalLight": [
             {
               "color": "#005dff",
               "_active": true,
               "position": {
                 "x": 0,
                 "y": -50,
                 "z": -80
               },
               "intensity": 5,
               "shadowMap": {
                 "bias": 0,
                 "scale": 1,
                 "width": 2048,
                 "height": 2048,
                 "helper": false
               }
             }
           ],
           "environmentLight": {
             "show": true,
             "hdrUrl": "https://cdn-upload.datav.aliyun.com/upload/download/1606467134385_studio_small_08_1k.hdr",
             "hdrIntensity": 0.3,
             "hdrOrientation": 0
           }
         },
         "animate": {
           "scanner": {
             "color": "#0b85ff",
             "speed": 0.002,
             "enable": true,
             "length": 0.3,
             "axisType": 2,
             "frontier": 1,
             "direction": -1
           },
           "autoRotate": {
             "axis": "y",
             "speed": 0.003,
             "enable": true,
             "showAxis": false,
             "direction": 1,
             "randomAxis": {
               "x": 0,
               "y": 1,
               "z": 0
             }
           },
           "modelAnimate": {
             "autoPlay": false,
             "animationList": [
               "減面_1Action",
               "立方體_2_0_2Action",
               "立方體_1_2Action",
               "管道_10Action",
               "立方體_1_5Action"
             ],
             "defaultAnimation": "減面_1Action"
           }
         },
         "interaction": {
           "enable": false,
           "pickType": "gpu",
           "clickType": "click",
           "interactiveExt": "local",
           "interactiveColor": "RGBA(79, 240, 252, 0.2)"
         },
         "postprocessing": {
           "ssr": {
             "show": false,
             "blurSize": 4,
             "glossiness": 0.6,
             "maxIteration": 20,
             "maxRayDistance": 500,
             "strideMagnitude": 1
           },
           "ssao": {
             "bias": 0.1,
             "show": false,
             "radius": 10,
             "blurSize": 4,
             "intensity": 1,
             "sharpness": 1
           },
           "bokeh": {
             "show": false,
             "aperture": 10,
             "focalSize": 0.05,
             "bokehRadius": 1,
             "focalDistance": 10
           },
           "ueBloom": {
             "mask": false,
             "show": true,
             "radius": 4,
             "opacity": 0.5,
             "strength": 1,
             "threshold": 0.5,
             "smoothWidth": 0.7
           },
           "motionBlur": {
             "show": false,
             "blurSize": 16,
             "intensity": 0.06
           },
           "antialiasType": "FXAA",
           "colorCorrection": {
             "hue": 0,
             "contrast": 1.5,
             "brightness": 0,
             "saturation": 0
           },
           "sharpenVignetteGrain": {
             "show": true,
             "sharpness": 0.2,
             "grainFactor": 0.1795,
             "vignetteRadius": 0.8,
             "vignetteSoftness": 0.5
           }
         }
       }
     },
     "md2": {
       "options": {
         "camera": {
           "type": "perspective",
           "fov": 30,
           "position": {
             "px": 15.302952415372028,
             "py": 8.222470271404996,
             "pz": -0.8703615128540956
           },
           "target": {
             "tx": 0.6615507106842622,
             "ty": 2.143284279923242,
             "tz": 0.40059515
           }
         }
       }
     }
   }

   var_md_lib

   {
     "md1": {
       "name": "md_1",
       "source": "https://cdn-upload.datav.aliyun.com/upload/download/1725264407288-0t3msUbo.glb"
     },
     "md2": {
       "name": "md_2",
       "source": "https://cdn-upload.datav.aliyun.com/upload/download/1725264542158-A6GQhRWx.glb"
     }
   }

   說明

   全域變數中提供了模型互動需要的資源資訊。上面案例完成了高塔模型資源的配置，液壓臂模型資源的配置資訊通過全域變數擷取。

   • var_cam_config：高塔和液壓臂模型的配置資料。md1是案例中複製好的高塔模型配置資訊，md2是通過地址擷取的液壓臂模型配置資訊。

   • var_md_lib：高塔和液壓臂的模型資源地址。

步驟六：使用藍圖實現組件互動

DataV-Board提供藍圖編輯功能，支援3D 模型與表單的互動，實現資料互動和互動觸發。下面將通過藍圖編輯實現Tab列表組件切換顯示模型資源和單擊按鈕組件播放模型動畫功能。

1. 在編輯器頁面左上方單擊表徵圖進入藍圖編輯器頁面。

2. 單擊左側導覽列的圖層節點，滑鼠懸浮在圖層節點名稱上，單擊表徵圖依次添加Tab列表、按鈕、模型查看器圖層節點到藍圖編輯畫布中。

3. 為圖層節點添加模型的切換和模型動畫開啟功能相關邏輯。

4. 為了實現模型和組件互動功能，在Tab列表切換時匯入模型資源並更新配置資訊。

   匯入模型查看器資料器配置

   var md = {};
   var var_md_lib = getCallbackValue("var_md_lib");//擷取儲存的模型資源的地址資訊
   md.url = var_md_lib[data.id].source;
   return md;

   更新群組件配置

   var config = getCallbackValue("var_cam_config");//擷取儲存的模型資源的配置資訊
   return config[data.id];

   說明

   getCallbackValue是DataV-Board中提供的過濾器擷取全域變數資料的方法。詳情請參見使用全域變數。

步驟七：預覽和發布資料看板

1. 添加完藍圖編輯後，單擊看板編輯頁面右上方的預覽，即可預覽資料看板的效果。您可以在看板上調整3D 模型的視角、切換3D 模型、開啟模型動畫。

   樣本產生的看板如下。

2. 單擊看板編輯頁面右上方的發布，選擇發布大屏。

3. 擷取看板訪問資訊並配置訪問限制。

   發布後，您可在看板編輯頁面右上方單擊發行，擷取訪問資訊並配置存取權限。

4. 擷取看板訪問地址後，您可將其投放至渲染主機、PC、手機等裝置進行訪問。