FVS三維組件API

新增三維組件漫遊動畫相關API：

getRoamAnimations 、playRoamAnimations 、updateRoamAnimationAction

interface DataLayer {

  /**

   * 圖層是否顯示

   */

  visible: boolean;

  /**

   * 設定圖層顯示或隱藏

   */

  setVisible: (visible: boolean) => void;

}

duchamp.getWidgetByName("三維組件名稱").getDataLayers();

FVS點選隱藏/顯示資料圖層

interface DataLayer {

  /**

   * 當前圖層是否顯示

   */

  visible: boolean;

  /**

   * 設定當前圖層顯示或隱藏

   */

  setVisible: (visible: boolean) => void;

}

duchamp.getWidgetByName("三維組件名稱").getDataLayerByName("圖層1");

FVS點選隱藏/顯示資料圖層

from:number

to:number

duration:number

to：場景變化的結束時間，整數，必須大於 from 

duration：場景完成變化的時長，單位 ms

自訂模型從第一天的 14:00 開始到 第二天的 14:00 結束，變化時長為 3 秒：

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

在上述場景的基礎上，開啟循環變化：

注：暫無停止場景時間變化API。

setInterval(function(){
duchamp.getWidgetByName("自訂模型1_頁面1").animateSceneTime({
     from: 14,
     to: 38,
     duration: 3000
});         
},2000)      

FVS自訂模型組件場景時間

name:string

name:模型mesh物件名稱

visible: 可見性

scaling: 縮放比例

rotation: 旋轉角度

position: 位置

focus: 聚焦模型位置

範例：獲取某個模型物件的縮放比例

duchamp.getWidgetByName("組件名稱").getMeshByName("模型名稱").scaling

-

visible:boolean

是否可見，布林型

• true：可見

• false：不可見

viod

範例：設定某個三維組件中某個模型物件不可見

duchamp.getWidgetByName("組件名稱").getMeshByName("模型名稱").setVisible(false);

-

NumberArray3

縮放比例的值：[X,Y,Z]

viod

範例：設定某個三維組件中某個模型物件的縮放比例

duchamp.getWidgetByName("組件名稱").getMeshByName("模型名稱").setScaling([10,10,10]);

NumberArray3

旋轉角度的值：[X,Y,Z]

viod

範例：設定某個三維組件中某個模型物件的縮放比例

duchamp.getWidgetByName("組件名稱").getMeshByName("模型名稱").setRotation([10,10,10]);

options: {

    target: "top" | "bottom" | "left" | "right" | "front" | "back" | "center";

    targetpos: (value: NumberArray3) => NumberArray3;

    viewRay: (value: NumberArray3) => NumberArray3;

    distance: (value: number) => number;

  }

1）target：相機聚焦到模型上的位置（模型物件的六個面中心和體中心），預設為 top

2）targetpos：在 focus 基礎上微調聚焦中心點的座標

3）viewRay：改變視線。

注：需滿足相機視角「垂直角度」的角度範圍

預設實現方向取決於 target，例如：

• 當 target 為 'top', 'bottom', 'front', 'center' 時，

  視線為斜向下 沿 y-z 平面 45 度：[0, -1, 1]

• 當 target 為 'left' 時，視線為沿 x-z 平面，斜向下

  45 度, 看向左側面：[1, -1, 0]

• 當 target 為 'right' 時，視線為沿 x-z 平面，斜向

  下 45 度, 看向右側面：[0, -1, 1]

4）distance：改變相機與模型的距離。

注：需滿足相機視角「縮放設定」的距離範圍

預設距離取決於 target 面的大小，若 target 為 'center' ，則取決於模型物件整體的大小

viod

範例1：

duchamp.getWidgetByName("組件名稱").getMeshByName("模型名稱").focus();

範例2：

const widget = duchamp.getWidgetByName("組件名稱");
const mesh = widget.getMeshByName("模型名稱");
mesh.focus({
   target: "center",
   viewRay: () => [1, -1, 1],
   distance: (v) => v * 0.8
  });

duchamp.getWidgetByName("自訂模型").refreshData({a:"參數a"});

注：傳遞多個參數時，寫法如下

duchamp.getWidgetByName("自訂模型").refreshData({a:"參數a",b:"參數b"});

範例2：給範本新增「頁面載入結束事件」，使三維組件定時重新整理資料：

setInterval(() => {
duchamp.getWidgetByName("自訂模型").refreshData();
}, 3000); //每隔 3 秒重新整理一次資料

JS實現三維組件傳參僅重新整理資料

subscribeMarkerData(observer: (data: { [key: string]: any }, observer: {unsubscribe: () => {}}) => void): void;

• data 為字典類型，其資料取決於資料圖層的配置
  

• key 為資料集中選擇的欄位名, value 為資料集中選擇欄位對應的值

• unsubscribe 為函式，用於取消監聽訂閱

範例：根據資料庫表欄位，控制模型是否可見

async function perform() {
  // 等待場景載入結束，並獲取到 widget, dataLayer
  const widget = await future(() => duchamp.getWidgetByName("停車場模型"));
  const dataLayer = await future(() => widget.getDataLayerByName("車輛監視"));

  // 根據資料圖層 marker 資料，隱藏指定模型
  const processMarkerData = data => {
    const visible = data["是否有車"] === "1";
    const name = data["車輛編號"];
    const mesh = widget.getMeshByName(name);
    mesh.setVisible(visible);
  };

  // 訂閱監聽資料圖層 Marker 資料，當 Marker 更新時，執行訂閱監聽函式
  const observer = dataLayer.subscribeMarkerData(data => {
    processMarkerData(data);
  });

  // 每隔 3s，重新整理組件資料
  const refreshTimerId = setInterval(() => {
    widget.refreshData();
  }, 3000); // 循環執行
  }

updateMarkerData(predicate: (data) => boolean, updater: (data) => void);

• predicator 為查詢函式，用於判斷資料項是否需要更新，若回傳值為 true，表示需要更新

• updator 為更新函式，用於更新透過 predicator 校驗，傳回為 true 的資料
  

const widget = duchamp.getWidgetByName("停車場模型");
const dataLayer = widget.getDataLayerByName("車輛監視");
  // 使用 updateMarkerData 方法更新資料
  dataLayer.updateMarkerData((markerData) => {
    return markerData["車輛編號"] === "車輛006";
  }, (markerData) => {
    markerData["停車時長"] = 12;
  });

使用正文框元件，輸入對應車輛編號和停車時長，編輯結束後模型資料變化。（停車場模型設定了停車時長超過 10h 模型紅色預警）如下圖所示：

點選下載範本：JS實現更新指定模型資料.fvs

範例：獲取「自訂模型」組件的漫遊路徑資訊

duchamp.getWidgetByName("自訂模型").getRoamAnimations();

-

RoamAnimationOptions

type RoamAnimationOptions = {
  /**
   * 漫遊路徑名稱
   */
  names: string[];
  /**
   * 播放模式：循環播放|單次播放
   */
  playMode: "loop"|"once";
};

範例1：給標題組件新增點選事件，播放「自訂模型」組件的「漫遊路徑1」動畫

duchamp.getWidgetByName("自訂模型").playRoamAnimations({
   names:["漫遊路徑1"], 
   playMode: "once"
})

範例2：在「頁面載入結束事件」中寫程式碼，實現頁面載入結束後自動播放漫遊動畫

setTimeout(() => {
  duchamp.getWidgetByName("自訂模型").playRoamAnimations({
   names:["漫遊路徑1"], 
   playMode: "once"
})
}, 5000)

-

動畫名稱

即為 getMeshByName 裏獲取的 animations[index].name。

注：此處為具體動畫名稱，非模型名稱。如下圖所示：

獲取「三維自訂場景1_頁面1」的「SMT貼片機爆炸歸位」模型的「1爆炸」動畫

const animation = duchamp.getWidgetByName("三維自訂場景1_頁面1").getMeshByName("SMT貼片機爆炸歸位").getAnimationByName("1爆炸")

開始播放「1爆炸」動畫

animation.play({
  // 是否重新開始播放
  isRestart: false,
  // 是否循環播放
  isLoop: false,
  // 播放結束是否恢復起始狀態
  isInitialOnPlayStop: false,
  // 播放結束回呼函式
  onAnimationPlayStop: () => {}
})

暫停播放「1爆炸」動畫

animation.pause()

結束播放「1爆炸」動畫

//true:動畫跳出，並恢復為動畫播放前的狀態
//false:動畫跳出，保持在當前動畫幀
animation.stop(true)

-