FVS自訂模型組件場景時間

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

1.1 版本

1.2 應用場景

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

1.3 功能簡介

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

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

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

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

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

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

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

2.1 新建範本

點選設計器左上角「檔案>新建大屏報表>從空白建立大屏」，範本名稱設定為「FVS自訂模型場景動態變化」，點選「建立範本」。

如下圖所示：

2.2 設定自訂模型組件

2.2.1 新增組件建立場景

新增自訂模型組件到頁面，點選「編輯組件」，生成一個空場景。場景狀態需保持「自動場景狀態」。如下圖所示：

2.2.2 新增模型物件

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

2）在自訂模型組件編輯介面，點選「模型>新增模型物件>上傳新模型」，將倉庫模型上傳後，選中倉庫模型，點選「完成」將其新增到場景中。如下圖所示：

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

4）設定完成後，點選左上角「傳回大屏範本」回到畫布頁面。

2.3 設定標題點選事件

2.3.1 新增標題組件

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

2.3.2 設定JavaScript點選事件

選中標題組件，點選「互動>點選事件>新增點選事件>JavaScript」，輸入事件名稱和 JavaScript 代碼：

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

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

如下圖所示：

2.4 效果預覽

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

注：不支援行動端。

點選下載範本：FVS自訂模型場景動態變化.fvs