構建3D園區監控場景

適用場景：安裝了「FineVis數據可視化」插件的使用者，可參考本文了解 FVS 範本製作。

1.1 版本

1.2 場景介紹

本文主要介紹在大屏範本中使用 自訂模型組件 匯入 3D 模型，並建構園區等場景的主要步驟。不介紹圖表、表格、指標卡等2D組件的實現。

1.3 實現效果

效果1：點選模型或按鈕，拉進三維視角

效果2：點選模型彈框監視視頻

2.1 建立組件

建立一個 FVS 大屏範本：

新增一個「三維自訂場景」組件，點選「編輯組件」，進入自訂模型編輯頁面。如下圖所示：

2.2 建立場景

三維自訂場景組件首次進入編輯介面時，需要建立模型場景。預設選擇的是「實景風格」，本例直接點選「生成場景」即可。

建立好場景後，進入組件編輯介面，選擇「場景」，將地面背景設定為「蜂巢」。如下圖所示：

2.3 設定模型

2.3.1 匯入模型

FVS 大屏編輯模式中，自訂模型組件僅支援 glb 格式的模型，使用者需要將其他格式的模型轉化為 glb 格式。

本文提供兩個範例模型：倉庫.glb、車間.glb 。點選下載檔案：glb檔案.zip

1）點選右側配置欄的「模型>新增模型物件>自訂模型」，點選「上傳新模型」，選擇本地準備好的 .glb 檔案型別的自訂模型，即可上傳到範本中。

2）分別點選需要上傳的兩個模型，即可進行多選，點選「載入場景」，即可將模型新增到組件介面。如下圖所示：

2.3.2 調整模型

剛匯入的模型可能看不到，有可能是模型過大、過小，或者所在位置超出視野範圍。

1）嘗試將模型大小縮減至 0.1 倍（或其他等級），再在這個量級上做進一步調整。

2）選中模型時，會出現位移工具，拖動位移工具即可調整模型位置。如下圖所示：

也可手動調整位置處的 (x,y,z) 座標系數值。

3）調整模型的旋轉視角

支援使用者調整模型的旋轉角度，一般只需要調整沿Y軸的旋轉角度，即水平面上的旋轉角度。如下圖所示：

4）調整整體場景的視角和大小

一般先在組件編輯介面調整視角和視野大小，再「傳回大屏編輯器」介面，調整到適合大屏整體的效果。

• 先在3D組件編輯介面調整（請看下圖中的操作說明）：

• 再傳回範本編輯介面，選中組件，點選右上角「視角調整」，組件邊框變為虛線，即可調整模型視角。調整好後按範本介面其他任意位置可跳出視角調整。如下圖所示：

2.3.3 配置資料

在 FVS 中，透過模型的名稱聯動 FR 資料集，配置資料標籤。本例範本已新增 2 個資料集作為範例。

1）進入組件編輯介面，在右側配置面板點選「資料>新增資料圖層」。

2）將圖層名稱改為對應的模型名稱，根據模型名稱匹配對應資料集的「模型名稱」和「模型內容」欄位。如下圖所示：

3）確定後點選「新增事件>資料更新後>資料標籤」，為模型設定顯示內容、字元大小、色相即顯示形式。如下圖所示：

2.4 設計彈窗和分頁跳轉

在 FVS 中，以模型的資料圖層作參數，將圖層中的模型名稱傳遞給交互物件，進而配置模型的聯動、彈框等特效。

2.4.1 設計監視視頻彈窗

1）進入三維城市編輯介面，點選「資料」。選擇事件物件為剛剛新增的「倉庫」圖層，點選「新增事件>按滑鼠左鍵」，選擇「網頁連結/彈出框」事件。如下圖所示：

2）設定彈框的內容連結為彈框內容頁面的預覽連結。這意味着使用者需要為彈框內容再製作一張 fvs 或 frm 等範本，引用範本內容。

• 本例彈框中使用的範本為「保安房監視1.fvs」，點選下載範本：保安房監控1.fvs，將此範本放在本地設計器預覽後，複製預覽連結即可使用。

• 可以調整彈框樣式，這裏省略介紹。詳情可參考說明文檔：FVS點選跳出彈出框 。

2.4.2 設定多分頁 平滑過渡實現模型視角切換

使用者需要實現“點選某個模型或按鈕，拉進視角或鑽取到場景的某個位置”時，我們需要為每個視角製作一個分頁，利用多分頁和平滑過渡效果實現模型視角的切換、空間位置的行動或鑽取。

1）點選建立頁面，新增兩個頁面並修改頁面名稱。該範本最終包含三個分頁：首頁、倉庫、生產車間。

2）在首頁中，選中自訂模型組件，為每個模型分別設定點選分頁跳轉事件。

例如點選倉庫，跳轉到倉庫頁面：

同理設定點選生產車間模型，跳轉到生產車間頁面。

3）還可以製作自訂按鈕，觸發跳轉分頁的事件。

例如使用標題組件，設定邊框背景，文字內容，還可以透過調整組件的內邊距，調整文字與背景的佈局效果。如下圖所示：

同樣為標題組件設定「互動>點選事件」，如下圖所示：

4）設定好所有點選事件後，選中首頁所有組件，複製貼補到另外兩張分頁中，事件也同樣被複制。

調整「倉庫」和「生產車間」的自訂模型組件視角，使其僅顯示對應的單個模型。並新增其他組件，如下圖所示：

5）開啟頁面間的平滑過渡

FVS 多分頁平滑過渡可以使同一組件在不同分頁中切換時，不需要重新載入，這可以滿足自訂模型組件切換視角的需求。

實現平滑過渡需要滿足兩個條件：

• 每個分頁均需開啟「平滑過渡」按鈕

• 平滑過渡的組件同型別且同名稱（複製貼補到不同分頁的組件自動同名）

2.5 效果預覽

PC 端預覽效果如下：

注：三維組件不支援行動端。

測試範本：智慧園區demo測試.fvs

測試材料：保安房監控1.fvs