这次小糕来总结一下Three.js中的Material们，也就是物体所使用的材质，通俗的说，材质决定了物体给人看起来的感觉，比如现实生活中，有的东西会反光。
但是在3D世界里，还是稍微有些不同，所以我们来看看Three.js为我们封装好的一些材料，当然其中有的效果在其他的图形语言中也是一样的原理，也就是通用的。
希望在看过本文后，你能很快熟悉这些材料的名字，以及呈现的效果。

一般材质

Basic

类名：MeshBasicMaterial
中文名：网格基础材质

最基本的材料类型。
它只有最基本的颜色，就好像我们在画上涂颜色一样，没有阴影，没有光照效果。
但你也可以给这个颜色设置一个透明度。
请输入图片描述

new THREE.MeshBasicMaterial({
    color: 0xff0000,
    transparent: true,
    opacity: 0.5}
);

Normal

类名：MeshNormalMaterial
中文名：网格法向材质

如其名，它会根据物理平面的法向、朝向来确定不同的光照程度，
它在没有光源的情况下，就能显现出来，不受光源影响。
这种默认有3D的感觉，一般也是我们一开始希望看到的效果。
请输入图片描述

new THREE.MeshNormalMaterial();

Lambert

类名：MeshLambertMaterial
中文名：网格法向材质

根据光源产生不同的效果，在没有光源的情况下，该材质的物体是看不见的。
在大部分 3D 应用中，朗伯都是一种常用的材质，我们可以调整颜色，可以通过 emissive 属性来给材质添加亮色。
请输入图片描述

new THREE.MeshLambertMaterial({
    color: 0xff0000, 
    transparent: true, 
    opacity: 0.5}
);

Phong

类名：MeshPhongMaterial
中文名：网格Phong式材质

和Lambert材质一样，Phong材质也是具有反光性质的。所以在没有光源的情况下，该材质的物体也是不可见的。
它与Lambert材质不同的地方在于，它能给物体添加的金属光泽反光强度更大，可以添加高光色、调整shininess属性改变反光的强度。
请输入图片描述

new THREE.MeshPhongMaterial({
  shininess: 1
});

Standard

类名：MeshStandardMaterial
中文名：网格标准材质

Lambert材质和Phong材质结合的感觉，有粗糙度、金属性材质，改变这些属性能够创建暗淡或者金属性光泽的表秒。
请输入图片描述

new THREE.MeshStandardMaterial({
  metalness: 0,
  roughness: 0.5
});

抽象材质

Depth

类名：MeshDepthMaterial
中文名：网格深度材质

它会根据对象每个部分所在的深度（距离你的距离），然后对应不同的灰度级，从黑到白绘制。
可以看到下图，注意看最白和最黑的部分，能感觉出来规律吧。
请输入图片描述

new THREE.MeshDepthMaterial();

Line

类名：MeshLineMaterial
中文名：网格直线材质

如果要画直接，我们必须使用LineBasicMaterial。这个和MeshBasicMaterial差不多。
还有 LineDashedMaterial，它能够让你设置直线中点的大小和间距。
为了让短划线起作用，你需要在geometry中调用computeLineDistance。
请输入图片描述

var material = new THREE.LineDashedMaterial({
  dashSize: 2,
  gapSize: 2
});
geometry.computeLineDistances();
var line = new THREE.Line(geometry, material);

Point

类名：MeshPointMaterial
中文名：网格点材质

跟画线类似，点的话需要使用 PointsMaterial。

var material = new THREE.PointsMaterial({color: 0xF3FFE2});
var points = new THREE.Points(geometry, material);

Sprite

类名：MeshPointMaterial
中文名：网格点材质

它能够使用纹理贴图，并且应用于雪碧材质上。Sprite是一种总是面向镜头的特殊平面。

var material = new THREE.SpriteMaterial({map: "mytexture.png"});
var sprite = new THREE.Sprite(material);

参考资料

Three.js Materials
three.js 之 Material