我一直试图围绕世界轴旋转一个立方体一段时间,但它没有给出准确的结果。回答我的上一个问题Rotate object around world axis with tween.js帮助我完成了轮换,但没有像我期望的那样.I我正在使用
var cubeAngle = 0;
var start = {angle: cubeAngle};
var end = {angle: cubeAngle + 90};
var tween = new TWEEN.Tween(start)
.to(end, 300)
.easing( TWEEN.Easing.Exponential.InOut )
.onUpdate(function(){
cubeAngle=this.angle;
rotateAroundWorldAxis(cube[1], new THREE.Vector3(0,1,0),degreeToRadians(cubeAngle));
})
.start()
旋转它,但不知怎的,它没有得到正确的角度。我发现的是,它不是在300毫秒内将cubeAngle添加到300毫秒,而是每毫秒将cubeAngle添加90,持续时间为300毫秒,因此旋转比我需要的要多得多。
经过一些点击尝试后,我找到了一个小值的匹配添加到cubeAngle并将时间旋转90度,但每次重新加载页面并单击旋转(因为我在点击事件中使用)它会以不同方式旋转几度。
我有一些screenshots来表明这一点。有时差异很小但有时它太明显了,因为我需要多次旋转所以最后变化很多。所以,是什么导致这个以及如何以正确的方式获得准确的结果?帮助!
答案 0 :(得分:0)
是的,是的,你加两次旋转......
你从0到90计算“n”,但在每个循环中你用n旋转,结果是:
1°n = 0旋转= 0
2°n = 1转= 0 + n = 1
3°n = 2转= 1 + n = 3
4°n = 3转= 3 + n = 6
5°n = 4转= 6 + n = 10
...
要解决您的问题,您必须按上一次旋转的增量旋转。
var cubeAngle = 0;
var start = {angle: cubeAngle};
var end = {angle: cubeAngle + 90};
var lastAngle=0; // global var
var tween = new TWEEN.Tween(start)
.to(end, 300)
.easing( TWEEN.Easing.Exponential.InOut )
.onUpdate(function(){
cubeAngle=this.angle;
//rotate only delta
rotateAroundWorldAxis(cube[1], new THREE.Vector3(0,1,0),degreeToRadians(cubeAngle-lastAngle));
lastAngle=cubeAngle; //save last position
})
.start()