01
Three.js 基本要素
思考:我们有了场景、相机、渲染器,除了这些还需要什么,才能展示3D图像?
这张照片就基本可以说明我们 Three.js 的 3D 设计模式:我们有了一个场景之后,我们需要将一个物体(拍摄对象)放进去。
有了物体之后我们还需要设置至少一个光源,这样我们才能看到这个物体。最后,呈现在客户眼前的是一系列由相机所拍摄出的照片连续播放产生的动画,相机的参数、位置和角度直接影响着我们所拍到的图片。
结论:我们需要在场景中放置👉物体(拍摄对象)、光源,才能展示3D图像。
那想要完全展示出来3D图像,需要具备哪些基本要素呢?
*物体(拍摄对象)
*几何体模型(Geometry)
*材质(Material)
*网格(Mesh)
*光源
02
Three.js 创建物体(拍摄对象)的设计模式
在计算机世界里,3D世界是由点组成,两个点能够组成一条直线,三个不在一条直线上的点就能够组成一个三角形面。
在 Three.js中 将任何物体(拍摄对象)结构为一个个小三角形。无论是二维图形还是三维图形,都可以用小三角形作为结构最小单位。而结构出来的就是我们拍摄对象的一个网格。
二维平面的网格结构:
三维球体网格结构:
可以看到在 Three.js 中三角形是最小分割单位,这就是网格结构模型,我们通常把这种网格模型叫做Mesh模型,Mesh模型是三维开发中使用的最为广泛的模型。
总结:绘制3D模型,常用的做法是用三角形组成的网格来模拟,如下图所示,用足够多的三角形时,兔子的身体看起来就足够平滑,跟真实兔子比较接近。著名的斯坦福兔子模型用了69451个三角形。
当然有网格结构还是不够的。就像人体一样,因为网格结构就像是骨架,在其外表还需要材质。材质就是物体的纹理(皮肤),决定着几何体模型的外表。
03
Three.js中的基本要素:
几何体模型(Geometry)
在Three.js中为我们预设了一些二维和三维几何体模型
二维几何体模型:
PlaneGeometry(平面几何体)
在线示例:
http://www.webgl3d.cn/threejs/docs/scenes/geometry-browser.html#PlaneGeometry
CircleGeometry(圆形几何体)
在线示例:http://www.webgl3d.cn/threejs/docs/scenes/geometry-browser.html#CircleGeometry
RingGeometry(圆环几何体)
在线示例:http://www.webgl3d.cn/threejs/docs/index.html#api/zh/geometries/RingGeometry
三维几何体模型:
BoxGeometry(立方几何体)
在线示例:http://www.webgl3d.cn/threejs/docs/scenes/geometry-browser.html#BoxGeometry
SphereGeometry(球几何体)
http://www.webgl3d.cn/threejs/docs/scenes/geometry-browser.html#SphereGeometry
CylinderGeometry(圆柱几何体)
在线示例:http://www.webgl3d.cn/threejs/docs/scenes/geometry-browser.html#CylinderGeometry
TorusGeometry(圆环几何体)
在线示例:http://www.webgl3d.cn/threejs/docs/scenes/geometry-browser.html#TorusGeometry
TubeGeometry(管道几何体)
在线示例:http://www.webgl3d.cn/threejs/docs/scenes/geometry-browser.html#TubeGeometry
以上所列举几何体模型是Three.js中内置几何体的一部分,我们在使用这些几何体的时候,只需要实例化(创建)相应几何体对象即可。
例如:实例化一个立方几何体
但是有了这么一个网格几何体是远远不够的,下一步就是给几何体添加材质(皮肤)。
04
Three.js中的基本要素:
材质(Material)
Three.js 也为我们预设了几种材质对象,这里简单的介绍三种:
【常用】基础网格材质(MeshBasicMaterial)
一个以简单着色(平面或线框)方式来绘制几何体的材质,这种材质不受光照的影响。
在线示例:
http://www.webgl3d.cn/threejs/docs/scenes/material-browser.html#MeshBasicMaterial
【常用】Lambert网格材质(MeshLambertMaterial)
一种非光泽表面的材质,没有镜面高光。这种材质可以很好地模拟一些表面(例如未经处理的木材或石材),但不能模拟具有镜面高光的光泽表面(例如涂漆木材)。
在线示例:http://www.webgl3d.cn/threejs/docs/scenes/material-browser.html#MeshLambertMaterial
【拓展:不常用】法线网格材质(MeshNormalMaterial)
一种RGB颜色的材质
在线示例:http://www.webgl3d.cn/threejs/docs/scenes/material-browser.html#MeshNormalMaterial
特殊说明:在同一个网格结构中我们可以多种材质进行叠加。