Question

我一直试图围绕世界轴旋转一个立方体一段时间，但它没有给出准确的结果。回答我的上一个问题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来表明这一点。有时差异很小但有时它太明显了，因为我需要多次旋转所以最后变化很多。所以，是什么导致这个以及如何以正确的方式获得准确的结果？帮助！

Answer 1

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

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

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

1 个答案: