FVS模型軌跡運動API

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

以下API支援 FVS自訂模型組件 以及 FVS三維城市組件 中的自訂模型，獲取模型物件後，可透過API設定模型沿特定軌跡運動、轉向、縮放等效果。

API option 說明

動畫時長相關規則

duration 和 speed 屬性，都可以指定動畫時長，但二者應用場景不同，一般只需要給出一個屬性即可；若兩者都存在，優先使用 duration。

1）duration：用於直接指定動畫時長，單位 秒，需大於等於 0；當 duration = 0 時，表示無動畫效果，立即變換到指定狀態。

2）speed：透過設定動畫速度來指定動畫時長，單位 1/秒，需大於 0 。比如給定 speed 的情況下，moveTo 到更遠的位置，需要的時間更多。

回呼監聽相關規則

1）onTransforming: (factor, value) => { func(); }  用於監聽動畫執行程式中的模型屬性的變化，以及動畫進度

• factor 表示動畫進度，範圍為[0, 1] 。動畫開始時 factor 為0，動畫結束時，factor 為 1。

• value 表示動畫屬性，對於 moveTo ，value 為模型位置，rotateTo 或 rotateForwardTo，value 為模型旋轉角度

2）onTransformCompleted: () => { func(); }  動畫結束時呼叫函式

rotateTo

實現方式如下：

export type IMeshAnimationInfo<T> = {
  onTransforming?: (factor: number, value: T) => void;
  onTransformCompleted?: () => void;
  duration?: number;
  speed?: number;
};
 
rotateTo(
    rotation: NumberArray3,
    option: IMeshAnimationInfo<NumberArray3>
  ): void;

實現案例如下：

//場景一：同時傳合法的duration和speed,duration生效
setTimeout(function(){
        // 獲取模型組件中的模型物件
    const widget=duchamp.getWidgetByName("3D");
    const taxi=widget.getMeshByName("taxi");
 
    const nextRotation = [100, 190, -60];

    rotationOption={ 
        duration:5,
        speed:50,
        onTransforming:(factor,value)=>{
            if(factor==0){
                console.log("場景1Begain：模型漸變(duration=10)到指定歐拉角")
                console.log("taxi的rotation:" taxi.rotation)
            }
        },
        onTransformCompleted: () => {
            console.log("場景1END！rotation:  [100, 180, -60] === [" taxi.rotation " ]")
        }
    }
    taxi.rotateTo(nextRotation, rotationOption);

    },1000)

效果如下圖所示：

rotateForwardTo

實現方法如下：

type MeshForward = {
  rotation?: NumberArray3;
  direction?: NumberArray3;
};
 
const DefaultMeshForward: MeshForward = {
  rotation: [0, 0, 0],
  direction: [0, 0, 1],
};
 
export type IMeshAnimationInfo<T> = {
  onTransforming?: (factor: number, value: T) => void;
  onTransformCompleted?: () => void;
  duration?: number;
  speed?: number;
};
 
rotateForwardTo(
    direction: NumberArray3,
    option: IMeshAnimationInfo<NumberArray3> 
  ): void;

實現案例如下：

 //場景二：指定朝向： rotation 
    setTimeout(function(){
        // 獲取模型組件中的模型物件
        const widget=duchamp.getWidgetByName("3D");
        const taxi=widget.getMeshByName("taxi");
     
        const nextForwardDirection = [1, 1, 1];

        const meshForward={
            rotation:[90,100,180],
            forward:[0,1,0]
        }
        rotateForwardOption1={
            duration: 4, 
            speed:60,
            meshForward,
            onTransforming:(factor,value)=>{
                if(factor==0){
                    taxi.setScaling([6,6,-6])
                    console.log("場景2Begain>>>>>定義朝向")
                }
            },
            onTransformCompleted: () => {
                console.log("場景2END")
            }
        }
        taxi.rotateForwardTo(nextForwardDirection, rotateForwardOption1);
    
        },1000)

效果如下圖所示：

scaleTo

實現方法如下：

export type IMeshAnimationInfo<T> = {
  onTransforming?: (factor: number, value: T) => void;
  onTransformCompleted?: () => void;
  duration?: number;
  speed?: number;
};
 
scaleTo(
    scaling: NumberArray3,
    option: IMeshAnimationInfo<NumberArray3>
  ): void;
 

實現案例如下：

//場景三：變換縮放大小
setTimeout(function(){
    // 獲取模型組件中的模型物件
    const widget=duchamp.getWidgetByName("3D");
    const taxi=widget.getMeshByName("taxi");
 
    const nextScale = [15, 15, 15];

    scaleOption={
        duration: 3, 
        onTransforming:(factor,value)=>{
            if(factor==0){
                console.log("場景3Begain")
                console.log("taxi的scale:" taxi.scaling)
            }
        },
        onTransformCompleted: () => {
            console.log("場景3END！taxi的scale:[15, 15, 15]===" taxi.scaling)
        }
    }
    taxi.scaleTo(nextScale, scaleOption);

    },1000)

效果如下圖所示：

moveTo

實現方法如下：

type MeshCoord = {
  rotation?: NumberArray3;
  forward?: NumberArray3;
};
  
const DefaultMeshCoord: MeshCoord = {
  rotation: [0, 0, 0],
  forward: [0, 0, 1],
};
 
export type IMeshAnimationInfo<T> = {
  onTransforming?: (factor: number, value: T) => void;
  onTransformCompleted?: () => void;
  duration?: number;
  speed?: number;
};
 
export type IMeshForwardRotationInfo<T> = IMeshAnimationInfo<T> 
 
moveTo(
    position: NumberArray3,
    option: IMeshAnimationInfo<NumberArray3>,
    rotateForwardOption?: IMeshForwardRotationInfo<NumberArray3>
  ): void;

實現案例如下：

//場景四:先轉向後行動
 setTimeout(function(){
    // 獲取模型組件中的模型物件
    const widget=duchamp.getWidgetByName("3D");
    const taxi=widget.getMeshByName("taxi");
 
    const nextPosition = [4.8, 1.0, -8];
    
    // 模型頭部朝向為旋轉角度為[0, 180, 0]時的 方向向量 [1, 0, 0].
    // 模型旋轉時長: 3
    const coord = { rotation: [0, 180, 0], forward: [1, 0, 0]};
    const rotateForwardOption = {
        coord, 
        duration: 3,
        onTransforming:(factor,value)=>{
        if(factor==0){
            console.log("場景4Begain")
        }
    },};

    // 模型沿直線運動到下一位置, 並自動旋轉模型朝向沿軌跡方向
    // 模型行動時長 3秒
    positionOption={ 
        duration: 3, 

        onTransforming:(factor,value)=>{
            if(factor==0){
                console.log("positionOption Begain")
                console.log("taxi的position:" taxi.position)
            }
        },
    
        onTransformCompleted: () => {
            console.log("場景4END！position的scale:[4.8, 1.0, -8]===" taxi.position)
        }
    }
    taxi.moveTo(nextPosition, positionOption,rotateForwardOption);

    },1000)

效果如下圖所示：

點選下載範本：模型軌跡運動JS範例.fvs