I'm trying to achieve a gradual rotation of a cube on the world axis using tween. Initially, I was able to rotate the cube around the world axis without tweening with the following code:
rotateAroundWorldAxis(cube[1], new THREE.Vector3(0,1,0),degreeToRadians(90));
However, I now wish to implement this rotation slowly by incorporating tween. Previously, I utilized the code snippet below:
var start = {x:cube[1].rotation.x, y:cube[1].rotation.y, z:cube[1].rotation.z};
var end = {x:cube[1].rotation.x , y:cube[1].rotation.y+degreeToRadians(90) ,
z:cube[1].rotation.z};
var tween = new TWEEN.Tween(start)
.to(end, 1000)
.easing( TWEEN.Easing.Exponential.InOut )
.onUpdate(function(){
cube[1].rotation.x = this.x;
cube[1].rotation.y = this.y;
cube[1].rotation.z = this.z;
})
.start()
This approach caused the cube to rotate around the object axis instead of the desired world axis. Consequently, I switched back to rotating around the world axis directly:
rotateAroundWorldAxis(cube[1], new THREE.Vector3(0,1,0),degreeToRadians(90));
But my challenge now is figuring out how to incorporate tweening into this specific rotation method.