使用 Tween 围绕世界轴精确旋转

Question

一段时间以来，我一直在尝试围绕世界轴旋转一个立方体，但它没有为我的最后一个问题提供准确的 results.Answer 帮助我完成了旋转，但不是我expecting.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()

旋转它但不知何故它没有得到正确的 angles.What 我发现不是在整整 300 毫秒内将 cubeAngle 添加 90，而是在 300 毫秒的持续时间内每毫秒将 cubeAngle 添加 90所以它旋转得比我需要的多得多。

经过一些尝试，我找到了一个小值的匹配项来添加到 cubeAngle 和时间将它旋转 90 度，但每次我重新加载页面并单击以旋转（因为我在单击事件中使用）它旋转相差几度。

我有一些 screenshots 来显示 this.Sometimes 差异很小，但有时它太明显了，因为我需要多次旋转所以最后它会变化为 much.So，什么是造成这种情况以及如何以正确的方式做到这一点以获得准确的结果？帮助！

Answer 1

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

你数 "n" 从 0 到 90，但在每个循环中你旋转 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 围绕世界轴精确旋转

Precise rotation around world axis using Tween

javascript

3d

three.js

rotation

tween.js