tween.js 动画的奇怪行为

Question

我正在使用 tween.js 将一个立方体旋转 90 度，但有些事情没有按预期工作， 我正在使用此代码：

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()
console.log(cube[1].rotation.y);

通过使用它，立方体沿 y 轴旋转 90 度 但在控制台中，它给出了旋转 0 的值 当我再次旋转它多次时，它每次都会在旋转值上增加 1.570796。所以，我很困惑为什么它不只在第一次添加这个值。

为了解决这个问题，我这样做了

cube[1].rotation.y+=1.57079632679;    //1

我在每次旋转后都添加了这个值，但不是每次都增加值，这会在第一次旋转后产生问题，它只增加一次。cube[1].rotation.y 的值是这样的

第一轮
旋转前 0 旋转 1.57.... //因为 1

第二轮
旋转 1.57 之前.... 旋转后 3.14.... //应该是 3.14...+ 1.57...

所以我的代码可以工作，即使它不应该 如果我仅在第一次旋转后添加 1.57，则旋转滞后 1。 谁能解释一下。

当我添加这个时

cube[1].rotation.y+=1.57079632679; 

它不应该不仅增加它的值而且旋转立方体而不用任何动画而是只做第一部分。为什么？

编辑

其实我没有把它放在渲染函数中，而是在鼠标点击时旋转它，这里是它的代码：

var mouseDown = false,
pageX = 0;

function onMouseDown(evt)
{
    evt.preventDefault();

    mouseDown = true;
    pageY = evt.pageY;
    pageX = evt.pageX;

    var x = event.x;
    var y = event.y;

    mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;

    raycaster.setFromCamera( mouse, camera );
    var intersects = raycaster.intersectObjects( objects );

    if ( intersects.length > 0 ) {
        if(intersects[ 0 ].object==cube[1])
        {
            move();
        }
    }
}

function move (){

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

console.log(cube[1].rotation.y); 

cube[1].rotation.y+=1.57079632679;

console.log(cube[1].rotation.y);
}

function degreeToRadians(degrees) {
    return degrees * Math.PI / 180;
}

function onMouseUp(evt)
{
    evt.preventDefault();

    mouseDown = false;

}

function animate() {

    requestAnimationFrame( animate );

    render();
    stats.update();

}

function render() {
    TWEEN.update();
    renderer.render( scene, camera );
}

Answer 1

您尝试在补间之前移动 Y 旋转的增量

function move (){

cube[1].rotation.y+=1.57079632679; // HERE !!!

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

console.log(cube[1].rotation.y); 
// NOT HERE !!!!
console.log(cube[1].rotation.y);
}

在您的代码中，您将立方体旋转了 90°，但在第一个渲染循环中，旋转被强制为补间计数值。 首先移动你以正确的值开始补间（旋转 + 90°）

希望我能理解您的问题！