Question

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

snprintf(serv_name, sizeof(serv_name), "newdir/%s", av[2]);
FILE* f = fopen(serv_name, "w");
if (f < 0) {
    perror("CLIENT:\n");
    exit(1);
}

通过使用它，立方体沿y轴旋转90度但在控制台中，它为旋转0提供了值当我再次旋转它时，它每次都会向旋转值添加1.570796。所以，我很困惑为什么它不会仅在第一次添加此值。

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

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

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

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

所以我的代码即使不应该也能正常工作如果我只在第一次旋转后添加1.57，则旋转滞后1。所以任何人都可以解释这一点。

当我添加这个

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;    //1

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°）启动补间

我希望我明白你的问题！

tween.js动画的奇怪行为

1 个答案: