前言

前面我们学习了顶点概念及位置颜色设置，里面都用到了材质来渲染出效果，本节我们就来了解下three常见的几种材质。

材质

材质本质上是对WebGL着色器的封装，能够方便我们的开发，常见的材质有：点材质、线材质、网格材质。

• 点材质：PointsMaterial，在场景中渲染出‘点’，这个点是可以通过size设置大小，这点跟我们生活中的‘点’是不同的。

 //创建立体几何体
const boxGeometry =  new THREE.BoxGeometry(10,10,10);
//利用点材质
const boxMaterial = new THREE.PointsMaterial({ color: 0x8888 ,size:2 });
//创建物体
const point = new THREE.Points(boxGeometry, boxMaterial);
scene.add(point);

从图上我们能清晰看到这些点显示出来就是正方形。

• 线材质：LineBasicMaterial(直线)、LineDashedMaterial(虚线)，在场景中渲染出直线、虚线，它们的用法跟点类似，我们使用Line模型进行创建。

//直线 虚线就用LineDashedMaterial
const boxMaterial = new THREE.LineBasicMaterial({ color: 0x8888 });
//根据几何体和材质创建物体
const line = new THREE.Line(boxGeometry, boxMaterial);

• 网格材质：MeshBasicMaterial，前面我们介绍过常见的几何缓冲体，它们就是网格模型，渲染过程中就用到了网格材质，这个是比较熟悉的材质。

//立方几何体
const boxGeometry = new THREE.BoxGeometry();
const boxMaterial = new THREE.MeshBasicMaterial({ color: 0x8888 });
const box = new THREE.Mesh(boxGeometry, boxMaterial);

从上面例子中，我们可以得出材质是跟模型搭配使用的，一些材质对应的不止一个模型，总结起来如下：

材质属性

我们在写案例过程中都用到了color属性，对于材质而言还有好多属性，在three中所有的材质都继承于Material类，所有Material中的属性就是材质的共有属性，下面简单了解下几种属性：

• opacity:用于指定材质的透明度，0.0-1.0，数字越小越透明。
• percisio:用于指定材质的渲染器精度，可以设置为highp、mediump、lowp。
• shadowSide:用于指定投影的面，一般和光对象结合使用。
• side:用于指定材质的渲染面，值有正面、背面、两者都有。
• transparent:用于指定材质是否透明，默认为false，当它为ture时，可以跟opcity结合使用。 除了上面这些，Material还有很多属性、方法，我们可以移步官网查看。

总结

材质是渲染图形的基础之一，我们要掌握各个材质与模型的对应关系，熟知相关用法。