請(qǐng)問(wèn)有辦法讓一個(gè)構(gòu)件在畫面上一直像動(dòng)畫一樣轉(zhuǎn)動(dòng)嗎?
Autodesk Forge 微信討論群組 – pochao 提問(wèn)
#您好,你可以透過(guò) requestAnimationFrame
和 setTimeout
這兩個(gè)函數(shù)搭配來(lái)達(dá)成,請(qǐng)看下方範(fàn)例(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;
// 要求第一個(gè)動(dòng)畫 frame
requestAnimationFrame( this.rotateHandler );
};
/**!
* 關(guān)鍵函數(shù)
*/
rotateHandler = () => {
if( !this.actived ) return;
const quaternion = new THREE.Quaternion();
// 設(shè)置旋轉(zhuǎn)量 - 依 Y 軸旋轉(zhuǎn)構(gòu)件 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毫秒后要求下一個(gè)動(dòng)畫 frame
setTimeout( () => {
requestAnimationFrame( this.rotateHandler );
}, 500 );
};
}
Autodesk.Viewing.theExtensionManager.registerExtension( 'Autodesk.ADN.Viewing.Extension.RotateTool', RotateExt );