108 THREE.JS 使用矩阵对3D对象进行位置设置

大家都知道，对模型操作常用的就是 平移，旋转，缩放三种操作。

正常我们使用Three.js的时候，都是通过模型对象上面的

position

rotation

scale

进行设置相关。Three.js通过这三种依次操作是先进行缩放，然后再旋转，最后再设置的位置。

那我们是否能够自己通过矩阵实现对模型的变换呢，答案是可以的，Three.js内部实现了矩阵的使用：

任何3D物体Object3D都有三个关联的矩阵：

• Object3D.matrix: 存储物体的本地变换。 这是对象相对于其父对象的变换。
• Object3D.matrixWorld: 对象的全局或世界变换。如果对象没有父对象，那么这与存储在矩阵matrix中的本地变换相同。

• Object3D.modelViewMatrix: 表示对象相坐标相对于摄像机空间坐标转换， 一个对象的 modelViewMatrix 是物体世界变换矩阵乘以摄像机相对于世界空间变换矩阵的逆矩阵。

  摄像机Cameras 有两个额外的四维矩阵:

• Camera.matrixWorldInverse: 视矩阵 - 摄像机世界坐标变换的逆矩阵。
• Camera.projectionMatrix: 表示将场景中的信息投影到裁剪空间。

摘自官方文档。

在我们修改了

Object3D

对象的

position

rotation

scale

属性以后，可以通过更新当前矩阵来获取到相应的局部变换矩阵，或者全局或者针对于相机的矩阵。

那么我们如何通过矩阵设置

Object3D

对象位置呢：

Three.js给我们封装了一个方法，

THREE.Matrix4.decompose(Object3D.position, Object3D.quaternion, Object3D.scale)

，用于更新模型的位置。

接下来我们查看实现案例逻辑：

首先我们设置好模型的相关逻辑，即位置，缩放和旋转。然后通过矩阵进行转换，这里注意矩阵转换的顺序，默认的变换，需要进行平移变换，然后进行旋转变换，最后进行缩放变换。和逻辑上的顺序刚好相反，最后再用方法更新即可。

最后，我还列出来了所有的变换方式，大家可以查看案例进行观察其它变换方式获得的结果。

案例查看：https://www.wjceo.com/blog/threejs2/2019-01-22/184.html

ps：今天增加了中心点的设置，具体的增加思路为：

首先将模型矩阵的变换中心乘以中心位置创建的矩阵。

然后进行模型相关的矩阵变换。

最后再乘以变换中心的逆矩阵将位置调整过来。