使用Tween在世界轴周围精确旋转

时间:2016-05-13 17:16:26

标签: javascript 3d three.js rotation tween.js

我一直试图围绕世界轴旋转一个立方体一段时间,但它没有给出准确的结果。回答我的上一个问题Rotate object around world axis with tween.js帮助我完成了轮换,但没有像我期望的那样.I我正在使用

var cubeAngle = 0;
var start = {angle: cubeAngle};
var end = {angle: cubeAngle + 90};
var tween = new TWEEN.Tween(start)
  .to(end, 300)
  .easing( TWEEN.Easing.Exponential.InOut )
  .onUpdate(function(){
   cubeAngle=this.angle;    
   rotateAroundWorldAxis(cube[1], new THREE.Vector3(0,1,0),degreeToRadians(cubeAngle));
   })
  .start()

旋转它,但不知怎的,它没有得到正确的角度。我发现的是,它不是在300毫秒内将cubeAngle添加到300毫秒,而是每毫秒将cubeAngle添加90,持续时间为300毫秒,因此旋转比我需要的要多得多。

经过一些点击尝试后,我找到了一个小值的匹配添加到cubeAngle并将时间旋转90度,但每次重新加载页面并单击旋转(因为我在点击事件中使用)它会以不同方式旋转几度。

我有一些screenshots来表明这一点。有时差异很小但有时它太明显了,因为我需要多次旋转所以最后变化很多。所以,是什么导致这个以及如何以正确的方式获得准确的结果?帮助!

1 个答案:

答案 0 :(得分:0)

是的,是的,你加两次旋转......

你从0到90计算“n”,但在每个循环中你用n旋转,结果是:

1°n = 0旋转= 0

2°n = 1转= 0 + n = 1

3°n = 2转= 1 + n = 3

4°n = 3转= 3 + n = 6

5°n = 4转= 6 + n = 10

...

要解决您的问题,您必须按上一次旋转的增量旋转。

var cubeAngle = 0;
var start = {angle: cubeAngle};
var end = {angle: cubeAngle + 90};
var lastAngle=0;                                // global var
var tween = new TWEEN.Tween(start)
  .to(end, 300)
  .easing( TWEEN.Easing.Exponential.InOut )
  .onUpdate(function(){
      cubeAngle=this.angle;    
      //rotate only delta
      rotateAroundWorldAxis(cube[1], new THREE.Vector3(0,1,0),degreeToRadians(cubeAngle-lastAngle));
      lastAngle=cubeAngle;                     //save last position
   })
  .start()