营业额的问题是轴与几何图形相连。
现在: http: //f2.s.qip.ru/cMfvUhEy.png
现在(旋转): http: //f3.s.qip.ru/cMfvUhEC.png
必要(旋转): http: //f1.s.qip.ru/cMfvUhEG.png
营业额的问题是轴与几何图形相连。
现在: http: //f2.s.qip.ru/cMfvUhEy.png
现在(旋转): http: //f3.s.qip.ru/cMfvUhEC.png
必要(旋转): http: //f1.s.qip.ru/cMfvUhEG.png
mesh.rotation.x = Math.PI / 180 * 90;
设置旋转,它不会增加它。
在three.js中,一个对象的方向可以通过它的欧拉旋转向量来指定object.rotation
。旋转矢量的三个分量分别表示围绕对象内部 x 轴、y 轴和 z 轴的弧度旋转。
执行旋转的顺序由 指定object.rotation.order
。默认顺序是“XYZ”——首先围绕 x 轴旋转,然后是 y 轴,然后是 z 轴。
旋转是相对于对象的内部坐标系执行的,而不是世界坐标系。这个很重要。因此,例如,在 x 旋转发生后,对象的 y 轴和 z 轴通常将不再与世界轴对齐。以这种方式指定的旋转不是唯一的。
有关欧拉角的更多信息,请参阅Wikipedia 文章。Three.js 遵循 Tait-Bryan 约定,如文章中所述。
编辑:如果您想“重置”旋转,请参阅此答案。
三.js r.73
如果您想旋转或以其他方式变换对象,但为了进一步变换而将其视为未变换,一种方法是将其添加到新的 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 的原生旋转然后平移行为相比(所以他在旋转上堆叠平移,而您正在执行两个独立的旋转,但想法是相同的)。