javascript - Wie drehe und verschiebe ich ein Widget?

Question

Gibt es eine Möglichkeit, eine Komponente nach der Auswahl zu verschieben oder zu drehen? Zum Beispiel, nachdem Sie es ausgewählt haben, drehen Sie es um einen Winkel entlang einer bestimmten Achse oder verschieben Sie das Bauteil nach der Auswahl an eine andere Position?

Answer 1

可以的，你可以这样来达成：

1. 依 Y 轴旋转 180 度(以下为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. 沿X轴移动 -100 单位(以下为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 );