Is there a way to make a component rotate on the screen like an animation?
Autodesk Forge WeChat discussion group – pochao question
Hello, you can achieve this by combining requestAnimationFrame 和 setTimeout these two functions, please see the example below (ES2015 code):
requestAnimationFrame
setTimeout
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 );
Hello, you can achieve this by combining
requestAnimationFrame
和setTimeout
these two functions, please see the example below (ES2015 code):