Three.js Obejct3D.matrix、.matrixWorld、.modelViewMatrix、.normalMatrix和.parent、.children属性的深入理解

   工作中，在涉及对模型一些矩阵变换操作的时候，都会看到这样的代码注释，获取AAA的矩阵，向量BBB applyAAA矩阵，变换到AAA的空间。今天，分享的是对于THREE.Object3D矩阵属性的一些理解，并附上工作时使用的感受。下面开始吧。

   我们先来讨论Obejct3D.matrix、.matrixWorld、.modelViewMatrix、.normalMatrix的属性，先看看Three.js 文档中是怎么说的。

.matrix : Matrix4
The local transform matrix. //局部变换矩阵，其实也就是模型矩阵

.matrixWorld : Matrix4
The global transform of the object. If the Object3D has no parent, then it's 
identical to the local transform .matrix.
/*物体的世界变换矩阵，若这个Object3D没有父级，则它将和模型矩阵相同，其实就是此时他是个4X4的单位矩阵乘上物体的模型矩阵*/
/*其中父与子的关系，可以说层级模型的概念，也常常应用到旋转的操作*/

.modelViewMatrix : Matrix4
This is passed to the shader and used to calculate the position of the object.
//这个值传递给着色器，用于计算物体的位置。
//也就是视图矩阵，用于计算物体在相机空间的位置

.normalMatrix : Matrix3
/*这个值传递给着色器，用于计算物体的光照。 它是物体的modelViewMatrix矩阵中，
左上角3x3子矩阵的逆的转置矩阵。(直接变变换到相机空间) */

  其中，中文注释是翻译加上我的理解，简单总结下来，以下4点：

   1. matrix：模型矩阵  2.matrixWorld 世界矩阵  3.modelViewMatrix 视图矩阵  （这三个矩的阵概念可以看我渲染流程的博客）

   4. normalMatrix  模型矩阵的逆转置矩阵  （这里留个问题吧，为什么要用逆转置矩阵呢，可以思考一下）

       下面就要经常用到的 .parent、.children属性，这两个就不用了过多解释了，.parent可以看成Object3D的父节点，.children可以看成Object3D的子节点。这样Object3D貌似可以看成一个存放Object3D的树了，哈哈。这种关系常常被应用到旋转，比如绕指定点旋转，绕指定边缘旋转。后面呢，我会给大家附上一个小Demo的实战就是利用这种关系构建了层级模型，方便操纵控旋转，那说了这么多，我们要讨论的重点是什么呢，哈哈，是.parent和 .children的矩阵关系。

       Object3D.matrix是相对于Object3D.parent来说，要在世界空间中获取其所在的变换矩阵，必须访问Object3D.matrixworld，那我们来思考一下 Object3D.matrixworld是如何计算的呢，在前面我提到过物体的世界变换矩阵，若这个Object3D没有父级，则它将和模型矩阵相同，其实就是此时他是个4X4的单位矩阵乘上物体的模型矩阵。

      简单来说，THREE中的物体是有层级关系的，所以THREE中物体的 matrixworld是通过模型矩阵 （Object3D.matrix）与父亲的 Object3D.matrixworld递归相乘得到的，哈哈。

      文章中的问题我会在后面进行回答，你也可以联系我们，我们来为你解答，广告时间到，哈哈，这里有WebGL、Vulkan、OpenGL，也有Three.js、Unity、UE4，还有前端框架Vue等！当然也有图形图像处理大佬哈！我们在这里期待大佬你的加入！