three.js 之 Material

在three.js中，材质决定了几何图形中的表面是如何画的。如果几何图形是骨架，定义了形状，那么材质就是皮肤。three.js 中有许多不同种类的材质，他们拥有不同的属性，像反光，纹理映射，调整透明度。

材质种类

网格基础材质(Basic Material)

最基本的材质是 MeshBasicMaterial。你能够把颜色color作为参数传进去来生成一个实心的带颜色对象，没有阴影，也不受光照影响。你也能够通过把透明度opacity作为参数传进去来调整透明度以及设置透明transparent为true。

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

basic material

网格法向材质(Normal Material)

MeshNormalMaterial是另一种材质。它会根据面的法线或朝向使用不同的颜色来渲染网格的面。

var material = new THREE.MeshNormalMaterial();

normal material

网格朗伯材质([Lambert Material]())

MeshLambertMaterial能够反光，可以让几何物体产生暗淡的表面。在大部分 3D 应用中，朗伯都是一种常用的材质。就像之前，我们可以调整颜色。我们可以通过 emissive 属性来给材质添加亮色。

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

lambert material

网格Phong式材质([Phong Material]())

就像朗伯材质，MeshPhongMaterial也是会反光的，但是它会给表面添加金属光泽，反光强度更大。你可以添加高光色和调整材质 shininess属性来改变反光的强度。

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

phong material

网格标准材质([Standard Material]())

MeshStandardMaterial的主要目标是将MeshLambertMaterial和MeshPhoneMaterial结合成一种材质。它有粗糙度和金属性的材质并且改变这些属性能够创建暗淡或者金属性光泽的表秒。

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

standard material

网格深度材质([Depth Material]())

另一种不同的材质是MeshDepthMaterial，它会对网格对象的灰度级别从黑到白绘制，根据内容的所在的深度不同。

var material = new THREE.MeshDepthMaterial();

depth material

上面我们看到的都是网格材质，因为他们是用户网格的。但是在three.js中也有不同的几何图形对象，他们有自己独特的材质。

直线材质([Line Material]())

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

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

var line = new THREE.Line(geometry, material);

line material
dashed line material

点材质([Points Material]())

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

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

points material

雪碧材质([Sprite Material]())

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

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

sprite material

参考

threejs materials