材质的定义：
1，ThreeJs的定义：材料描述物体的外观。它们以（大部分）独立于渲染器的方式定义，因此如果您决定使用不同的渲染器，则不必重写材质。
2，OpenGL的定义：材质是环境色、 漫反射色、镜面反射色和发射色以及光泽度的组合。
three.js中的材质及性能：
模拟现实世界中的物体：MeshBasicMaterial➡ MeshLambertMaterial➡ MeshPhongMaterial
更高级的计算实现物理材质：MeshStandardMaterial➡ MeshPhysicalMaterial
各种标准材料从最快到最慢 MeshBasicMaterial➡ MeshLambertMaterial➡ MeshPhongMaterial➡ MeshStandardMaterial➡ MeshPhysicalMaterial
MeshBasicMaterial
这是一个基本的材料，你可以用来给你的几何图形一个简单的颜色或显示你的线框几何形状。（平面）
//新建材质
const material = new THREE.MeshBasicMaterial({
color: 0xFF0000, // 设置颜色
});MeshLambertmaterial
这是一种考虑到照明并使用的材料创建无光泽的无光泽物体（哑光材质）
//新建材质
const material = new THREE.MeshLambertmaterial({
color: 0xFF0000, // 设置颜色
});MeshPhongmaterial
这是一种还考虑到照明的材料可用于创建闪亮的对象。（漆面）
//新建材质
const material = new THREE.MeshPhongmaterial({
color: 0xFF0000, // 设置颜色
});更复杂的材料需要更多的 GPU 能力来绘制。在较慢的 GPU（例如手机）上，您可能希望通过使用一种不太复杂的材质来降低绘制场景所需的 GPU 功率。同样，如果您不需要额外的功能，请使用最简单的材料。如果您不需要照明和镜面高光，请使用.MeshBasicMaterial，MeshLambertMaterial，MeshBasicMaterial
--------------------------------------------------------升级------------------------------------------------
材质的组成：网格Mesh = Geometry 几何 + Material 材质。
上面公式的解释：网格是几何与材质混合后的3D模型，这个模型的外观有材质决定，这个模型的形状由几何决定。
材质是Three.js的重点，Three.js中的模型有两部分组成。第一部分是形状，也就是three文档里面Geometry 几何，第二部分是材质，也就是three.js文档中的Material 材质，就是这个模型的视觉表现。
下面举例说明：
案例1：
网格
=
几何+
材质（蓝色）
以下示例代码：
geometry = new THREE.BoxGeometry( 1 );
material = new THREE.MeshBasicMaterial( { color: 0x199ED8 } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );案例2：
网格
=几何+
材质
示例2 的箱子是图片，那么在three.js中如何实现呢，在下面的代码中体现出来。
以下示例代码：
const texture = new THREE.TextureLoader().load( 'textures/crate.gif' );//箱子图片
const geometry = new THREE.BoxGeometry( 200, 200, 200 );
const material = new THREE.MeshBasicMaterial( { map: texture } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );在three js中。简单的模型可以用自带的方法初始化，如果出现如下模型我们改怎么办呢。
在现在主流的建模软件中。我们可以使用3D max、C4D、Blender、虚幻引擎等工具软件进行建模贴图，设计出复杂的、视觉表现更丰富的、三维模型，通过职位结实的扩展库引入到我们的项目中。
blender中的建模及引入页面细节效果（镜面高光，亚光）
案例3：
网格
=
几何+
材质（蓝色）
联想以下案例：
http://vr.ff.com/us/ 
Renault Espace Visualization
https://renaultespace.littleworkshop.fr/
Transmit 5https://panic.com/transmit/
在现实中三维交互数据展现主要有前端或webgl工程师完成，关于建模有三维建模师完成工作。在模型交互中的一些特效，需要开发的工程师来完成,比如说场景中的模型交互特效：水面波浪、光晕、燃烧效果等。这些特效需要更高级的webgl技术来实现，比如说Shader、GLSL技术。在three. js中。就是多种Shaderpass来完成，但是他们的底层都是GLSL。