【技术调研】三维（3）-ThreeJs-几何体、材质、贴图、灯光及案例

几何体

​ 几何体是构建模型的基础，模型=几何体+材质。threejs中已内置了很多几何体。这里不一一介绍。

BufferGeometry

是面片、线或点几何体的有效表述。包括顶点位置，面片索引、法相量、颜色值、UV 坐标和自定义缓存属性值。使用 BufferGeometry 可以有效减少向 GPU 传输上述数据所需的开销。

​ BufferGeometry是一个没有任何形状的空几何体，通过定义顶点数据将BufferGeometry自定义为任何几何形状。类似于webGL中通过点来绘制几何体。

材质

​ 材质描述了物体的外观。材质的属性（以MeshBasicMaterial为例）：

.alphaMap : Texture
alpha贴图是一张灰度纹理，用于控制整个表面的不透明度。（黑色：完全透明；白色：完全不透明）。 默认值为null。

仅使用纹理的颜色，忽略alpha通道（如果存在）。 对于RGB和RGBA纹理，WebGL渲染器在采样此纹理时将使用绿色通道， 因为在DXT压缩和未压缩RGB 565格式中为绿色提供了额外的精度。 Luminance-only以及luminance/alpha纹理也仍然有效。

.aoMap : Texture
该纹理的红色通道用作环境遮挡贴图。默认值为null。aoMap需要第二组UV。

.aoMapIntensity : Float
环境遮挡效果的强度。默认值为1。零是不遮挡效果。

.color : Color
材质的颜色(Color)，默认值为白色 (0xffffff)。

.combine : Integer
如何将表面颜色的结果与环境贴图（如果有）结合起来。

选项为THREE.MultiplyOperation（默认值），THREE.MixOperation， THREE.AddOperation。如果选择多个，则使用.reflectivity在两种颜色之间进行混合。

.envMap : Texture
环境贴图。默认值为null。

.fog : Boolean
材质是否受雾影响。默认为true。

.lightMap : Texture
光照贴图。默认值为null。lightMap需要第二组UV。

.lightMapIntensity : Float
烘焙光的强度。默认值为1。

.map : Texture
颜色贴图。可以选择包括一个alpha通道，通常与.transparent 或.alphaTest。默认为null。

.reflectivity : Float
环境贴图对表面的影响程度; 见.combine。默认值为1，有效范围介于0（无反射）和1（完全反射）之间。

.refractionRatio : Float
空气的折射率（IOR）（约为1）除以材质的折射率。它与环境映射模式THREE.CubeRefractionMapping 和THREE.EquirectangularRefractionMapping一起使用。 The index of refraction (IOR) of air (approximately 1) divided by the index of refraction of the material. It is used with environment mapping mode THREE.CubeRefractionMapping. 折射率不应超过1。默认值为0.98。

.specularMap : Texture
材质使用的高光贴图。默认值为null。

.wireframe : Boolean
将几何体渲染为线框。默认值为false（即渲染为平面多边形）。

.wireframeLinecap : String
定义线两端的外观。可选值为 'butt'，'round' 和 'square'。默认为'round'。

该属性对应2D Canvas lineJoin属性， 并且会被WebGL渲染器忽略。

.wireframeLinejoin : String
定义线连接节点的样式。可选值为 'round', 'bevel' 和 'miter'。默认值为 'round'。

该属性对应2D Canvas lineJoin属性， 并且会被WebGL渲染器忽略。

.wireframeLinewidth : Float
控制线框宽度。默认值为1。

​ 一些常用的材质：

材质	描述	受光照影响	特点
MeshBasicMaterial	基础光照模型	×
MeshLambertMaterial	Lambert光照模型(漫反射)	√
MeshPhongMaterial	Phong光照模型(漫反射、高光反射)	√
MeshStandardMaterial	基于物理的光照模型(PBR物理材质)，可以提供更加真实的材质效果	√	物理网格材质使用了更复杂的着色器功能，大部分的特性是默认关闭的，需要手动开启。
MeshPhysicalMaterial	属于PBR物理材质(基于物理的渲染physically-based rendering)，可以提供更加真实的材质效果	√	MeshPhysicalMaterial是MeshStandardMaterial的扩展子类

官网材质相关内容：

贴图

​ 可以理解为“皮肤”，一些常用的贴图：

• 纹理贴图： 即常规颜色贴图，具体见官网map
• 环境光贴图：用于模拟物体表面环境光的遮蔽效果，具体见官网aoMap
• 法线贴图：具体见官网normalMap
• 粗糙度贴图：具体见官网roughnessMap
• 高度贴图：具体见官网displacementMap

灯光

​ 使用Light模拟光照对网格模型mesh(物体表面)的影响，如果使用受光照影响的材质，在不开灯的情况下是看不见的。

环境光AmbientLight

环境光AmbientLight没有特定方向，整体改变场景的光照，会均匀的照亮场景中的所有物体。因为没有方向，所以不能用来投射阴影。

语法:AmbientLight( color : Color, intensity : Float )

• color 可选，光源颜色，默认白色
• intensity 可选，光照的轻度，默认值为1

//环境光:没有特定方向，整体改变场景的光照明暗
const ambient = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambient);

平行光

语法:DirectionalLight( color : Color, intensity : Float )

• color 可选，光源颜色，默认白色
• intensity 可选，光照的强度默认值为 1。

平行光的方向是一个矢量，平行光的属性如下：<