three.js中有许多基础概念,我们在学习three之前还是需要先了解一下的,我们可以看一下官网的这张图片。
渲染器(Renderer):这可以说是three.js的主要对象。你传入一个场景(Scene)和一个摄像机(Camera)到渲染器(Renderer)中,然后它会将摄像机视椎体中的三维场景渲染成一个二维图片显示在画布上。
场景图: 它是一个树状结构,由很多对象组成,比如图中包含了一个场景(Scene)对象 ,多个网格(Mesh)对象,光源(Light)对象,群组(Group),三维物体(Object3D),和摄像机(Camera)对象。一个场景(Scene)对象定义了场景图最基本的要素,并包了含背景色和雾等属性。这些对象通过一个层级关系明确的树状结构来展示出各自的位置和方向。
网格(Mesh)对象可以理解为用一种特定的材质(Material)来绘制的一个特定的几何体(Geometry)。材质(Material)和几何体(Geometry)可以被多个网格(Mesh)对象使用。
几何体(Geometry)对象代表一些几何体,如球体、立方体、平面、狗、猫、人、树、建筑等物体的顶点信息。Three.js内置了许多基本几何体 。
材质(Material)对象代表绘制几何体的表面属性,包括使用的颜色,和光亮程度。一个材质(Material)可以引用一个或多个纹理(Texture)。
纹理(Texture)对象通常表示一幅要么从文件中加载,要么在画布上生成,要么由另一个场景渲染出的图像。
简单来讲:场景就是一个舞台,网格等类似于演员,群组类似于演员组合,材质就是演员穿的衣服集,纹理就是演员的衣服。同类的网格加入群组,加入场景可以节省很多浏览器的内存,但是需要将群组内的网格绝对定位改为相对定位使用。
在项目中我们一般可以将Renderer(渲染器)、Scene(场景)、Camera(相机)、light(光源)分别创建为一个class类,在需要的时候进行调用,Mesh(网格体)、Group(群组)基本都是同一类物体创建一个class类,循环后台给的数据绘制出来之后加入场景即可。