Three.js使用矩阵来编码3D变换——平移,旋转和比例。Object3D的每一个实例都有一个矩阵来存储它的位置,旋转和比例。这篇文章将会讲解怎么更新一个物体的变换。
Convenience properties and matrixAutoUpdate
有两种方法可以更新一个物体的变换:
1 修改物体的位置,四元(quaternion)和比例,让three.js根据这些属性重新计算矩阵:
object.position.copy(start_position);
object.quaternion.copy(quaternion);
默认情况, matrixAutoUpdate属性的值是true,矩阵被自动重新计算。如果对象是静态的,或者您希望在重新计算时进行手动控制,则可以通过将该属性设置为false来获得更好的性能:
object.matrixAutoUpdate = false;
修改任何属性之后,手动更新矩阵:
object.updateMatrix();
2 直接修改物体的矩阵。Matrix4类有很多方法来修改矩阵。
object.matrix.setRotationFromQuaternion(quaternion);
object.matrix.setPosition(start_position);
object.matrixAutoUpdate = false;
注意,在这种情况中,matrixAutoUpdate必须被设置为false,你需要确保不会调用updateMatrix。因为调用updateMatrix会破坏对矩阵的手动修改,从位置,比例等重新计算。
Object and world matrices
一个物体的矩阵存储的是相对于其父元素的变换。想获取物体的全局坐标,必须要经过物体的Object3D.matrixWorld 。
不管是父级物体还是子物体的变换变了,都可以通过调用updateMatrixWorld()来请求更新子对象的matrixWorld.
Rotation and Quaternion
Three.js有两种方式来表示3D旋转:Euler angles 和 quaternion,以及两者之间的转换方法。Euler angles受到”gimbal lock”的影响,其中某些配置可能失去一定程度的自由度(防止物体围绕一个轴旋转)。因为这个原因,物体旋转总是被存储在物体的quaternion中。
先前版本的three.js包括一个useQuaternion属性,当设置为false时,会导致从Euler angles计算对象的矩阵。 这种做法已被弃用,现在,您应该使用setRotationFromEuler方法来更新quaternion。