使用 tween.js 围绕世界轴旋转对象
Rotate object around world axis with tween.js
我想通过使用 tween.I 在世界轴上旋转立方体 我可以通过使用
在不使用补间的情况下围绕世界轴旋转立方体
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()
之前,但它围绕物体 axis.So 旋转立方体,我切换到
rotateAroundWorldAxis(cube[1], new THREE.Vector3(0,1,0),degreeToRadians(90));
但是如何与补间一起使用呢?
您可以使用补间动画将通用值从 0 更改为 90,然后在更新中使用 rotateAroundWorldAxis 函数
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};
在更新中
cubeAngle=this.angle;
rotateAroundWorldAxis(cube[1], new THREE.Vector3(0,1,0),degreeToRadians(cubeAngle));
我想通过使用 tween.I 在世界轴上旋转立方体 我可以通过使用
在不使用补间的情况下围绕世界轴旋转立方体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()
之前,但它围绕物体 axis.So 旋转立方体,我切换到
rotateAroundWorldAxis(cube[1], new THREE.Vector3(0,1,0),degreeToRadians(90));
但是如何与补间一起使用呢?
您可以使用补间动画将通用值从 0 更改为 90,然后在更新中使用 rotateAroundWorldAxis 函数
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};
在更新中
cubeAngle=this.angle;
rotateAroundWorldAxis(cube[1], new THREE.Vector3(0,1,0),degreeToRadians(cubeAngle));