three.js 的渲染结构

理解three.js 的渲染结构

1 three.js 的渲染

• Three.js 封装了场景、灯光、阴影、材质、纹理和三维算法，让你不必再直接用WebGL 开发项目。
• three.js 在渲染三维场景时，需要创建很多对象，并将它们关联在一起。

下图便是一个基本的three.js 渲染结构。

解释一下上面的示意图：

1.1 Renderer 渲染器

Renderer 是three.js 的主要对象。当你将一个场景Scene 和一个摄像机Camera 传递到渲染器的渲染方法中，渲染器便会将摄像机视椎体中的三维场景渲染成一个二维图像显示在canvas 画布中。

1.2 Scene 场景对象

场景对象是树状结构的，其中包含了三维对象Object3D 和灯光对象Light。

• Object3D 是可以被直接渲染出来的，Object3D是网格对象Mesh和集合对象Group的基类。
• 场景对象可以定义场景的背景色和雾效。

在场景对象的树状结构中，每个对象的变换信息都是相对的。

比如汽车和汽车里的人，人的位置是相对于汽车而言的，当汽车移动了，人的本地坐标位坐标位虽然不变，但其世界坐标位已经变了。

1.3 Camera 相机对象

按理说，相机对象是在场景里的，但是相机对象不在它所看的场景里，这就像我们