Rotate object around world axis with tween.js

问题

I want to rotate a cube on world axis by using tween.I am able to rotate the cube around world axis without using tween by using

rotateAroundWorldAxis(cube[1], new THREE.Vector3(0,1,0),degreeToRadians(90)); 

but I want to happen this slowly so I want to use it with tween.

I was using

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()

before, but it was rotating the cube around object axis.So,I switched to

rotateAroundWorldAxis(cube[1], new THREE.Vector3(0,1,0),degreeToRadians(90));

but how to use it with tween?

回答1:

You can use tween to change a generic value from 0 to 90 and then in the update use the rotateAroundWorldAxis function

var cubeAngle = 0; // use this global variable if you want to rotate more than one time

in tween initialization

var start = {angle: cubeAngle};
var end = {angle: cubeAngle + 90};

in onUpdate

cubeAngle=this.angle;    
rotateAroundWorldAxis(cube[1], new THREE.Vector3(0,1,0),degreeToRadians(cubeAngle));

来源：https://stackoverflow.com/questions/37097101/rotate-object-around-world-axis-with-tween-js