FVS三維組件動畫應用實例

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

1.1 版本

1.2 場景介紹

本文主要介紹 FVS三維組件 中上傳自訂模型時，若模型帶有動畫方案，應該如何新增模型動畫，以及如何實現其他組件與動畫的聯動效果。

本文參考實體可點選跳轉至範本庫下載範本進行體驗：SMT貼片產線監視demo  。

1.3 實現思路

本文僅示範模型動畫的應用，實現效果如下：

1）頁面1 和 頁面2 使用同一模型，頁面1 中模型開啟動畫，頁面2 中模型不開啟動畫；再透過 標題組件 切換分頁，實現動畫的停止與播放。

2）頁面3 中使用的模型包含兩種不同效果的動畫，同樣使用標題組件點選聯動三維組件動畫，實現模型的展開與合併動畫。

點選下載模型檔案：SMT貼片機模型.zip

2.1 建立範本

建立一張大屏範本，可自訂名稱、畫布尺寸等。如下圖所示：

點選組件區「三維組件>三維自訂場景」，將組件新增到畫布中，點選右側配置區「編輯組件」，進入自訂模型組件編輯頁面。如下圖所示：

2.2 建立場景

首次進入自訂模型組件編輯介面時，需要生成一個空場景或匯入已有場景。這裏我們選擇一種風格，生成場景即可。如下圖所示：

2.3 新增模型

1）進入場景編輯介面後，點選右側配置欄的「模型>新增模型物件」，點選「新增模型」，將下載的 glb 模型檔案上傳至模型庫。如下圖所示：

2）上傳模型後，選中「SMT單條產線行動.glb」，點選「載入場景」，介面中則會出現選中的模型。如下圖所示：

2.4 設定SMT產線行動動畫

2.4.1 開啓模型動畫

在「模型」配置面板中，點選「模型動畫管理」，勾選「開啓模型動畫」，再點選「新增動畫方案」。

若模型帶有動畫，則可以選擇動畫，並設定動畫播放的方式。

SMT單條產線行動.glb 模型有 4 種行動動畫方案，選擇任意一種，選擇「立即播放動畫」，並勾選「開啓循環播放」。

如下圖所示：

2.4.2 複製頁面並關閉模型動畫

1）完成動畫設定後，點選模型邊框介面左上角「傳回視覺化看板」 傳回畫布，選中組件，點選右上角「視角調整」，組件邊框變為虛線，即可調整模型視角。調整好後按範本介面其他任意位置可跳出視角調整。如下圖所示：

2）選中「頁面1」，按滑鼠右鍵點選「複製頁面」，將新頁面命名為「頁面2」。如下圖所示：

3）進行 頁面2 中的自訂模型組件，取消勾選「開啓模型動畫」。如下圖所示：

4）傳回畫布，再調整一個合適的視角。

2.4.3 設定標題組件切換分頁

1）在 頁面1 中，新增一個「標題組件」，標題內容為「停止播放」。再給其新增一個「互動>點選事件>分頁跳轉」事件，跳轉到沒有動畫效果的 頁面2 。如下圖所示：

2.5 設定貼片機展開合併動畫

2.5.1 新增模型物件

點選畫布下方「建立頁面」，建立一個 頁面3 ，在 頁面3 中新增一個自訂模型組件。

這裏參考 2.3 節操作示範，選中已經上傳的「SMT貼片機爆炸歸為.glb」模型檔案即可。

如下圖所示：

2.5.2 開啓模型動畫

點選「模型動畫管理」，勾選「開啓模型動畫」即可。這裏不需要新增動畫方案，因為要透過標題組件來觸發動畫。如下圖所示：

2.5.3 設定標題組件聯動三維組件動畫

1）完成動畫設定後，點選模型邊框介面左上角「傳回視覺化看板」 傳回畫布，根據實際情況調整自訂模型組件的大小和視角。如下圖所示：

2）在 頁面3 中新增一個標題組件，標題內容修改為「模型展開」，點選「互動>新增點選事件>三維組件動畫」。如下圖所示：

選擇三維組件後，若組件使用的模型包含動畫方案，則可以選擇觸發動畫。這裏選擇「爆炸」動畫，觸發時機為點選立即觸發。如下圖所示：

設定完成後，再複製一個標題組件，將觸發動畫改為「歸位」動畫。

這樣在預覽時，點選不同的標題，即可觸發不同的動畫效果。如 1.3 節所示。

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

點選下載本文範例範本及資料：模型動畫應用示例.zip

範本資源線上體驗： SMT貼片產線監視

範本資源下載位址：SMT貼片產線監視demo