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的值，当我再次旋转它的次数时，它将每个time.So的旋转值增加1.570796，我很困惑为什么它不只是第一次添加这个值。

所以为了解决这个问题我做了这个

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

我在每次旋转后增加了这个值，但不是每次增加值，而是在第一次旋转后增加值，只增加cube1的once.Value。

轮调1

在旋转之前0之后旋转1.57.//因为1

旋转2

在第1.57轮之前。在第3.14轮之后..。//当它应该是3.14...+ 1.57.

所以我的代码可以工作，尽管它不应该，如果我只在第一次旋转之后添加1.57，那么旋转就会滞后1，所以任何人都能解释这一点。

当我加上这个

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

难道它不应该不仅增加它的值，而且旋转立方体而没有任何动画，而是它只做第一个part.Why？

编辑

实际上，我并没有把它放在呈现函数中，而是在鼠标单击时旋转它，下面是它的代码：

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°)开始图层

希望我能理解你的问题！