javascript - 請問如何讓構件依時間轉動(動畫​​)？

Question

請問有辦法讓一個構件在畫面上一直像動畫一樣轉動嗎？

Autodesk Forge 微信討論群組 – pochao 提問

#

Answer 1

您好，你可以透過 requestAnimationFrame 和 setTimeout 這兩個函數搭配來達成，請看下方範例(ES2015程式碼)：

class RotateExt extends Autodesk.Viewing.Extension {
  constructor( viewer, options ) {
    super();
  }

   load() {
    this.actived = true;
    viewer.addEventListener( Autodesk.Viewing.SELECTION_CHANGED_EVENT, this.onSelectionChanged );
    return true;
   }

   unload() {
    this.actived = false;
    viewer.removeEventListener( Autodesk.Viewing.SELECTION_CHANGED_EVENT, this.onSelectionChanged );
    return true;
   }
   
   onSelectionChanged = ( event ) => {
    this.model = event.model;
    this.fragIdsArray = event.fragIdsArray;

    // 要求第一个动画 frame
    requestAnimationFrame( this.rotateHandler );
  };

  /**!
   * 关键函数
   */
  rotateHandler = () => {
    if( !this.actived ) return;

    const quaternion = new THREE.Quaternion();
    // 设置旋转量 - 依 Y 轴旋转构件 60 度
    quaternion.setFromAxisAngle( new THREE.Vector3( 0,1,0 ), Math.PI / 3 );

    const model = this.model;
    const fragIdsArray = this.fragIdsArray;

    fragIdsArray.forEach( ( fragId, idx ) => {
      const fragProxy = this.viewer.impl.getFragmentProxy( model, fragId );

      fragProxy.getAnimTransform();

      const position = new THREE.Vector3( fragProxy.position.x, fragProxy.position.y, fragProxy.position.z );
      position.applyQuaternion( quaternion );

      fragProxy.position = position;
      fragProxy.quaternion.multiplyQuaternions( quaternion, fragProxy.quaternion );

      if( idx === 0 ) {
        const euler = new THREE.Euler();
        euler.setFromQuaternion( fragProxy.quaternion, 0 );
      }

      fragProxy.updateAnimTransform();
    });

    this.viewer.impl.sceneUpdated( true );
    
    // 500毫秒后要求下一个动画 frame
    setTimeout( () => {
        requestAnimationFrame( this.rotateHandler );
    }, 500 );
  };
}

Autodesk.Viewing.theExtensionManager.registerExtension( 'Autodesk.ADN.Viewing.Extension.RotateTool', RotateExt );