三維自訂場景組件場景時間

適用場景：安裝了「FVS企業戰情室編輯模式」插件的使用者，可參考本文了解 FVS 範本的相關功能。

1.1 版本

1.2 應用場景

透過時間體系可快速設定出滿意的光照、天空等效果，透過 JS API還可用於呈現場景跟隨時間變化的動態效果。

1.3 功能簡介

進入自訂模型組件編輯介面，在「場景>環境」屬性中設定「場景時間」：

1）預設時間為 14:00 ，可滑動或點選時間軸，或直接編輯時間顯示框改變時間，輸入框僅支援輸入 0-24 之間的整數。

2）場景時間左上角 標識表示為「自動場景狀態」，此時「天空背景、環境光、光源」為對應場景時間的預設設定。

3）若場景時間確定後，修改了「天空背景、環境光、光源」中的任意設定，場景狀態變為「手動場景狀態」，左上角標識為  。

4）在「手動場景狀態」下，若再次修改場景時間，場景狀態變化為對應時間的「自動場景狀態」。

5）在「自動場景狀態」下，支援 animateSceneTime() API，實現場景時間動態變化。 

本文範例效果為，點選標題組件，實現自訂模型組件場景動態變化。

2.1 建立範本

建立一張視覺化看板，可自訂名稱、畫布尺寸等。如下圖所示：

2.2 設定自訂模型組件

2.2.1 新增組件建立場景

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

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

注：生成場景後，「場景>環境>場景時間」中的場景狀態需保持「自動場景狀態」。因為之後需要設定 JS 點選事件，JS 點選事件中的 animateSceneTime API僅支援「自動場景狀態」。

2.2.2 新增模型物件

1）點選下載並解壓倉庫模型：倉庫.zip

2）在組件編輯介面，點選「模型>新增模型物件>上傳模型」，選擇下載的 倉庫.glb 檔案，點選「開啟」，彈出模型預處理設定框，保持預設設定，點選「確定」，倉庫模型則被成功新增至模型庫中。如下圖所示：

3）選中模型庫中的倉庫模型，點選「載入場景」，將倉庫模型載入場景中。如下圖所示：

4）關閉模型管理介面，在模型列表選中倉庫模型，調整下縮放比例、位置和視覺方向等。如下圖所示：

5）設定完成後，點選左上角「傳回視覺化看板」回到畫布頁面。

2.3 設標度題點選事件

2.3.1 新增標題組件

點選「其他>標題」，將其新增到畫布，設定標題內容為「點選觸發場景狀態變化」。如下圖所示：

2.3.2 設定JavaScript點選事件

選中標題組件，點選「交互>新增事件>滑鼠點選>JavaScript」，輸入 JavaScript 程式碼。如下圖所示：

JavaScript 程式碼如下所示：

注1：from 和 to 對應數字僅支援整數，且 from 必須小於 to 。

注2：JS 程式碼中雙引號內的 三維自訂場景1_頁面1 為三維自訂場景組件的組件名稱，此例沒有修改三維自訂場景組件的組件名稱，故此處使用預設組件名稱。若使用者在操作程式中修改了組件名稱，雙引號內需要更換為使用者自行修改的組件名稱。

duchamp.getWidgetByName("三維自訂場景1_頁面1").animateSceneTime({
     from: 14, //從預設14點開始
     to: 38, //到第二天的14點結束
     duration: 3000 //變化時長為 3 秒
});         

2.4 效果預覽

儲存報表，點選「預覽」，效果如下圖所示：

注：不支援行動端。

點選下載範本：三維自訂場景組件場景時間.fvs