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

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

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

第二轮
旋转前 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旋转的增量移动到tween之前

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°）

希望我理解你的问题！

tween.js 动画的奇怪行为

Strange behavior by tween.js animation

javascript

3d

three.js

rotation

tween.js