使用tween.js绕世界轴旋转对象 [英] Rotate object around world axis with tween.js
本文介绍了使用tween.js绕世界轴旋转对象的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想使用补间在世界轴上旋转一个多维数据集。我能够通过使用补间在世界轴上旋转该多维数据集而无需使用补间
I want to rotate a cube on world axis by using tween.I am able to rotate the cube around world axis without using tween by using
rotateAroundWorldAxis(cube[1], new THREE.Vector3(0,1,0),degreeToRadians(90));
但是我想慢慢进行,所以我想在补间中使用它。
but I want to happen this slowly so I want to use it with tween.
我正在使用
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()
之前,但是它绕对象轴旋转了多维数据集。因此,我切换到
before, but it was rotating the cube around object axis.So,I switched to
rotateAroundWorldAxis(cube[1], new THREE.Vector3(0,1,0),degreeToRadians(90));
但是如何在补间中使用它?
but how to use it with tween?
推荐答案
您可以使用补间将通用值从0更改为90,然后在更新中使用rotateAroundWorldAxis函数
You can use tween to change a generic value from 0 to 90 and then in the update use the rotateAroundWorldAxis function
var cubeAngle = 0; // use this global variable if you want to rotate more than one time
一次以上,请使用此全局变量>
in tween initialization
var start = {angle: cubeAngle};
var end = {angle: cubeAngle + 90};
在onUpdate
cubeAngle=this.angle;
rotateAroundWorldAxis(cube[1], new THREE.Vector3(0,1,0),degreeToRadians(cubeAngle));
这篇关于使用tween.js绕世界轴旋转对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文