使用tween.js围绕世界轴旋转对象

Rotate object around world axis with tween.js

本文关键字：旋转 对象 世界 tween js 使用      更新时间：2023-09-26

我想用tween在世界轴上旋转一个立方体。我可以使用在不使用tween的情况下绕世界轴旋转立方体

rotateAroundWorldAxis(cube[1], new THREE.Vector3(0,1,0),degreeToRadians(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()

之前，但它是围绕对象轴旋转立方体。所以，我转到

rotateAroundWorldAxis(cube[1], new THREE.Vector3(0,1,0),degreeToRadians(90));

但是如何与tween一起使用呢？

您可以使用tween将泛型值从0更改为90，然后在更新中使用rotateRoundWorldAxis函数

var cubeAngle = 0; // use this global variable if you want to rotate more than one time

中间初始化

var start = {angle: cubeAngle};
var end = {angle: cubeAngle + 90};

在onUpdate 中

cubeAngle=this.angle;    
rotateAroundWorldAxis(cube[1], new THREE.Vector3(0,1,0),degreeToRadians(cubeAngle));
相关文章：