【09】three进阶——矩阵变换（Matrix transformations）

Three.js使用matrix编码3D变换

在Three.js中，每个Object3D实例都有一个matrix属性用于存储对象的平移（位置）、旋转和缩放信息。本文概述了如何更新对象的变换。

便利的属性和matrixAutoUpdate

对象的转换可以通过以下两种方法更新：

1. 修改对象的属性：通过改变position、quaternion和scale属性，可以让Three.js重新计算对象矩阵。默认情况下，matrixAutoUpdate属性为true，会自动重新计算矩阵。如果要提高性能，可以将此属性设置为false，并在更改任何属性后手动调用object.updateMatrix()来更新矩阵。

2. 直接修改对象的矩阵：可以使用Matrix4类提供的方法直接修改矩阵，这要求将matrixAutoUpdate设置为false，并确保不调用updateMatrix()，以避免破坏手动所做的更改。

对象和世界矩阵

对象的matrix属性描述了对象相对于其父节点（Object3D.parent）的变换。要获取对象在世界坐标系中的转换，必须访问对象的Object3D.matrixWorld属性。当父对象或子对象的变换发生更改时，应调用updateMatrixWorld()来更新子对象的matrixWorld。

旋转和四元数

Three.js提供了两种表示3D旋转的方式：欧拉角和四元数，以及它们之间的转换方法。由于欧拉角可能遇到“万向节锁定”的问题，对象的旋转始终存储在对象的quaternion中。

测试开发之前端篇-Web前端简介

了解更多

小南瓜开发平台

查看原文：【09】three进阶——矩阵变换（Matrix transformations）

文章来源：

小南瓜开发平台

扫码关注公众号