javascript - Comment faire pivoter et déplacer un widget?

Question

Existe-t-il un moyen de déplacer ou de faire pivoter un composant après l'avoir sélectionné ? Par exemple, après l'avoir sélectionné, faites-le pivoter d'un angle le long d'un certain axe, ou après l'avoir sélectionné, déplacez le composant vers une autre position ?

Answer 1

Oui, vous pouvez y parvenir comme ceci :

1. Faites pivoter de 180 degrés le long de l'axe Y (ce qui suit est un exemple de code pour ES2015) :

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

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

   unload() {
    viewer.removeEventListener( Autodesk.Viewing.SELECTION_CHANGED_EVENT, this.onSelectionChanged );
    return true;
   }
   
  /**!
   * 关键函数
   */
   onSelectionChanged = ( event ) => {
       
    const quaternion = new THREE.Quaternion();
    // 设置旋转量 - 依 Y 轴旋转构件 180 度
    quaternion.setFromAxisAngle( new THREE.Vector3( 0,1,0 ), Math.PI );

    const model = event.model;
    const fragIdsArray = event.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 );
  };
}

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

1. Déplacez -100 unités le long de l'axe X (ce qui suit est un exemple de code pour ES2015) :

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

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

   unload() {
    viewer.removeEventListener( Autodesk.Viewing.SELECTION_CHANGED_EVENT, this.onSelectionChanged );
    return true;
   }

  /**!
   * 关键函数
   */
   onSelectionChanged = ( event ) => {
    
    // 设置移动量 - 向 X 轴移动 -100 单位
    const offset = new THREE.Vector3( -100, 0 , 0 );

    const model = event.model;
    const fragIdsArray = event.fragIdsArray;

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

      fragProxy.getAnimTransform();

      const position = new THREE.Vector3(
        fragProxy.position.x + offset.x,
        fragProxy.position.y + offset.y,
        fragProxy.position.z + offset.z
      );

      fragProxy.position = position;

      fragProxy.updateAnimTransform();
    });
    
    this.viewer.impl.sceneUpdated( true );
  };
}

Autodesk.Viewing.theExtensionManager.registerExtension( 'Autodesk.ADN.Viewing.Extension.TranslateTool', TranslateExt );