threejs 源码解析_Three.js源码解读一：Object3D

前言

可能很多同学会发现，学习Three.js的API非常容易，但是真正理解API的作用却非常难。其实让大家感到难的并不是Three.js本身，而是Three.js背后所隐藏的3D图形学知识。本系列Three.js源码解读文章，会帮你一边补齐3D图形学的基础知识，一边真正理解到Three.js的实现原理，知其然，知其所以然。

正文

Object3D是ThreeJS中大部分物体的基类，它包含了物体的位移，旋转，缩放，以及各个物体父子关系的js实现。选取Object3D几个重要的属性做解释：

对象组合

parent 父对象

children 子对象

matrixWorld 全局形变

matrix 本地形变

一个3D对象往往由多个父子对象组成，父对象的位移, 旋转, 缩放会传递给所有的子对象。

this.parent指向父对象，this.children包含了所有的子对象。

对象组合

通过add为物体添加子对象。需要注意的是，如果该子对象有其他的父对象，会先解除子对象和旧的父对象的父子关系，然后将子对象添加到新的父对象中。

this.matrix表示物体自身的本地形变，this.matrixWorld表示物体的全局形变。当物体没有父对象时，全局形变就是本地形变。

//本地形变

this.matrix = local transform

//全局形变

this.matrixWorld = this.parent ? this.parent