FVS點選切換三維自訂視角

適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FVS 範本的相關功能。

1.1 版本

1.2 應用場景

在學習本文內容前，請先學習 三維場景相機視角 ，瞭解視角參數等相關知識。

V2.2.0 版本三維組件新增的「相機視角」功能，可實現視角綁定模型，點選模型切換自訂視角。

V2.3.1 版本新增「三維自訂視角」點選事件，可實現點選其他組件切換三維組件自訂視角。

無需再透過複雜的 JS 程式碼實現，效果如下圖所示：

1.3 功能簡介

支援點選事件的二維組件，均支援新增「三維自訂視角」事件。功能設定項包括：

• 事件名稱：設定該事件名稱

• 觸發物件：選擇三維組件物件。為了區分三維背景頁和分頁的組件，選擇時組件名稱預設帶有頁面名稱前綴。

• 視角來源：可選擇公共視角或自訂輸入。

公共視角即三維組件「相機視角」處新增的視角，如下圖所示：

自訂輸入時，可複製三維場景視角，貼上更換至此，也可以手動修改座標值。如下圖所示：

2.1 建立範本

點選設計器左上角「檔案>建立視覺化看板」，建立一張空白視覺化看板，可自訂名稱和尺寸。如下圖所示：

2.2 設計自訂模型組件

2.2.1 新增組件並建立場景

新增一個三維自訂場景組件到畫布中，點選「編輯組件」，生成一個空場景。如下圖所示：

2.2.2 上傳並新增模型

1）點選下載並解壓 glb 模型檔案：整體園區模型.zip

2）在三維場景編輯介面，點選「模型>新增模型」彈出模型管理介面，點選「上傳模型」進行上傳。

選中模型，點選「載入場景」將其新增到場景中，載入後需自行關閉模型管理介面。如下圖所示：

2.2.3 設定模型縮放比例

「整體園區模型」新增到場景中時，縮放比例較小，需選中模型後，修改為合適的比例。如下圖所示：

2.3 設定公共相機視角

點選「場景>相機」找到相機視角設定，點選「新增當前視角」即可新增公共相機視角。如下圖所示：

本例需要新增三個視角：

• 整體視角

• 主樓視角，綁定「主樓」模型，則預覽時點選模型即可切換到該視角。

• 倉庫視角，綁定「倉庫」模型，則預覽時點選模型即可切換到該視角。

2.4 新增三維自訂視角事件

1）在場景編輯介面點選左上角「傳回視覺化看板」，回到畫布，新增一個標題組件，標題內容為「整體視角」。

2）給標題組件新增一個點選事件，選擇「三維自訂視角」，選擇對應的三維組件及視角。如下圖所示：

3）另外「主樓視角」和「倉庫視角」可直接複製已設定好的標題組件，修改事件中的視角來源即可。

2.5 效果預覽

點選範本右上角「儲存」，「預覽」按鈕，效果如 1.2 節預期效果所示。

注：不支援行動端。

點選下載範本：FVS點選切換三維自訂視角.fvs