javascript - 請問如何讓構件依時間轉動(動畫)?
phpcn_u1582
phpcn_u1582 2017-05-19 10:09:55
0
1
523

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

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

#
phpcn_u1582
phpcn_u1582

全部回覆 (1)
漂亮男人

您好,你可以透過requestAnimationFramesetTimeout這兩個函數搭配來達成,請看下方範例(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 );
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!