如何旋转对象并将其旋转重置为零?

时间:2013-02-08 14:22:57

标签: javascript html5 canvas three.js

营业额的问题在于轴附着在地理位置上。

现在:__ http://f2.s.qip.ru/cMfvUhEy.png

现在(旋转):http://f3.s.qip.ru/cMfvUhEC.png

必要(轮播):http://f1.s.qip.ru/cMfvUhEG.png

2 个答案:

答案 0 :(得分:10)

mesh.rotation.x = Math.PI / 180 * 90;

设置轮换,它不会增加

在three.js中,对象的方向可以通过其Euler旋转向量object.rotation指定。旋转矢量的三个分量分别表示围绕对象内部x轴,y轴和z轴的弧度旋转。

执行旋转的顺序由object.rotation.order指定。默认顺序为'XYZ' - 首先围绕x轴旋转,然后是y轴,然后是z轴。

相对于对象的内部坐标系执行旋转 - 而不是世界坐标系。这个很重要。因此,例如,在发生x旋转之后,对象的y轴和z轴通常不再与世界轴对齐。以这种方式指定的旋转不是唯一的。

有关欧拉角的更多信息,请参阅Wikipedia article。正如文章中所解释的那样,Three.js遵循Tait-Bryan惯例。

编辑:如果您想“重置”旋转,请参阅this answer

three.js r.73

答案 1 :(得分:1)

如果要旋转或以其他方式转换对象,但为了进一步转换而将其视为非转换,则一种方法是将其添加到新的Object3D实例并将其他转换应用于:

var line = new THREE.Geometry();

line.vertices.push(
    new THREE.Vector3( 0, 0, 0 ),
    new THREE.Vector3( 0, 10, 0 ),
);

line.rotation.z = 30 * Math.PI / 180;

var lineObject = new THREE.Object3D();
lineObject.Add(line);
// lineObject.rotation.z == 0 and its rotation axes align with the world
// you can perform any further rotations on lineObject

您可以从Udacity ThreeJS课程的视频中了解有关此变换叠加方法的更多信息:

https://www.youtube.com/watch?v=RBemS5NCVyw

讲师讨论了如何在旋转时旋转时钟的手,  与ThreeJS的原生旋转然后平移行为相比(因此他在旋转时堆叠平移,而你执行两次独立旋转,但想法是相同的。)