Блог

Я пытаюсь создать анимационное действие для объекта,которое поворачивает каждый компонент x,y, z отдельно (и в разное время), как вы можете видеть здесь, я настраиваю анимацию для этого:

https://jsfiddle.net/u4xg5731/

Проблема в том, что результат не поворачивается в правильное положение. Как я могу получить правильный результат?

 //This is the mesh's orientation that we want to interpolate to (the orientation we want to end up at after the animation has finished. Note, we don't want to travel directly to it)
meshOriginal.rotateX( THREE.Math.degToRad(-45) );
meshOriginal.rotateY( THREE.Math.degToRad(100) );
meshOriginal.rotateZ( THREE.Math.degToRad(30) );



let clock = new THREE.Clock();
let mixer = new THREE.AnimationMixer( scene );
let tracks = [];
let quaternionArray = [];

eulerX.set(0,0,0);
tempQuaternion.setFromEuler( eulerX );
eulerX.set(THREE.Math.degToRad(-45),0,0);
tempQuaternion2.setFromEuler( eulerX );
quaternionArray = quaternionArray.concat( tempQuaternion.toArray(), tempQuaternion2.toArray() ); 
tracks.push( new THREE.QuaternionKeyframeTrack( meshFinal.uuid '.quaternion', [ 0, 6 ], quaternionArray ) );

quaternionArray = [];

eulerY.set(0,0,0);
tempQuaternion.setFromEuler( eulerY );
eulerY.set(0,THREE.Math.degToRad(100),0);
tempQuaternion2.setFromEuler( eulerY );
quaternionArray = quaternionArray.concat( tempQuaternion.toArray(), tempQuaternion2.toArray() );
tracks.push( new THREE.QuaternionKeyframeTrack( meshFinal.uuid '.quaternion', [ 3, 9 ], quaternionArray ) );

quaternionArray = [];

eulerZ.set(0,0,0);
tempQuaternion.setFromEuler( eulerZ );
eulerZ.set(0,0,THREE.Math.degToRad(30));
tempQuaternion2.setFromEuler( eulerZ );
quaternionArray = quaternionArray.concat( tempQuaternion.toArray(), tempQuaternion2.toArray() );
tracks.push( new THREE.QuaternionKeyframeTrack( meshFinal.uuid '.quaternion', [ 6, 12 ], quaternionArray ) );

clip = new THREE.AnimationClip( 'rotate', -1, tracks );
mixer.clipAction( clip, meshFinal ).play();