【09】three进阶——矩阵变换(Matrix transformations)
我们非常重视原创文章,为尊重知识产权并避免潜在的版权问题,我们在此提供文章的摘要供您初步了解。如果您想要查阅更为详尽的内容,访问作者的公众号页面获取完整文章。
Three.js使用matrix编码3D变换
在Three.js中,每个Object3D
实例都有一个matrix
属性用于存储对象的平移(位置)、旋转和缩放信息。本文概述了如何更新对象的变换。
便利的属性和matrixAutoUpdate
对象的转换可以通过以下两种方法更新:
-
修改对象的属性:通过改变
position
、quaternion
和scale
属性,可以让Three.js重新计算对象矩阵。默认情况下,matrixAutoUpdate
属性为true
,会自动重新计算矩阵。如果要提高性能,可以将此属性设置为false
,并在更改任何属性后手动调用object.updateMatrix()
来更新矩阵。 -
直接修改对象的矩阵:可以使用
Matrix4
类提供的方法直接修改矩阵,这要求将matrixAutoUpdate
设置为false
,并确保不调用updateMatrix()
,以避免破坏手动所做的更改。
对象和世界矩阵
对象的matrix
属性描述了对象相对于其父节点(Object3D.parent
)的变换。要获取对象在世界坐标系中的转换,必须访问对象的Object3D.matrixWorld
属性。当父对象或子对象的变换发生更改时,应调用updateMatrixWorld()
来更新子对象的matrixWorld
。
旋转和四元数
Three.js提供了两种表示3D旋转的方式:欧拉角和四元数,以及它们之间的转换方法。由于欧拉角可能遇到“万向节锁定”的问题,对象的旋转始终存储在对象的quaternion
中。
想要了解更多内容?