初探three.js材质

初探three.js材质

 

这节我们浅谈一下THREE的材质。材质就是物体的皮肤，决定物体的表面。THREE的材质有很多种，他们有的和到相机的距离有关，有的和面的法向量角度有关，有的不受光照的影响，有的受到光照的影响会产生反射效果或者漫反射效果，也可以将多个材质合成一个。
1. THREE.MeshBasicMaterial(基础材料)。
2. THREE.MeshDepthMaterial(深度材料)。
3. THREE.MeshNormalMaterial(法向材料)。
4. THREE.MeshFaceMaterial(面材质)。
5. THREE.MeshLambertMaterial(Lambert材质)。
6. THREE.MeshPhongMaterial(Phong材质)。
7. THREE.LineBasicMaterial(线性基础材质)。
8. THREE.LineDashMaterial(虚线材质)。
接下来我们详细的讲一下这些材质。

1.THREE.MeshBasicMaterial(基础材料)

基础材质非常简单，它不受光照影响。它常用的一些属性如下：
- color 材质的颜色
- wireframe 设置该属性可以将材质设置成线框
- wireframeLinewidth 线框中线的宽度
- wireframeLineLinecap 线框线段端点如何显示

var mesh = new THREE.MeshBasicMaterial({color: 0xffaa00})

2.THREE.MeshDepthMaterial(深度材料)

这种材质不受光照影响，同时也不能设置材质颜色，它只与物体到摄像机的距离有关，越远越暗。它常用的一些属性如下：
- wireframe 是否显示线框
- wireframeLineWidth 线框线的宽度

var material = new THREE.MeshDepthMaterial();

3.THREE.MeshNormalMaterial(法向材料)

这种材料表面颜色只与面的法向量方向决定。它常用的一些属性如下：
- wireframe 设置该属性可以将材质设置成线框
- wireframeLinewidth 线框中线的宽度
- shading 设置着色方法FlatShading表示平面着色SmoothShading表示平滑着色

var material = new THREE.MeshNormalMaterial();

4.THREE.MeshFaceMaterial(面材质)

这是一个材料容器，他可以为每个面设置不同的材料。直接看代码：

var materialArray = [];
materialArray.push(new THREE.MeshBasicMaterial({color: 0x009e60}));
materialArray.push(new THREE.MeshPhongMaterial({color: 0x0051ba}));
materialArray.push(new THREE.MeshNormalMaterial({color: 0xffd500}));
materialArray.push(new THREE.MeshLambertMaterial({color: 0xff5800}));
materialArray.push(new THREE.MeshNormalMaterial({color: 0xC41E3A}));
materialArray.push(new THREE.MeshNormalMaterial({color: 0xffffff}));
var faceMaterial = new THREE.MeshFaceMaterial(materialArray);
var cubeGeom = new THREE.BoxGeometry(3, 3, 3);
var cube = new THREE.Mesh(cubeGeom, faceMaterial);

我们给一个正方体的六个面设置了六个不同的材质。

5.THREE.MeshLambertMaterial(Lambert材质)

它是一种高级材质，可以对光源产生反应创建不光亮的表面。除了上面材料的属性外，还有一些独特的属性，
- ambient 这是材料的环境色，这个颜色会与环境光源叠加的颜色相乘，默认为白色。
- emissive 这是材料的发射颜色，就是不受光照时发出的颜色，默认为黑色。
- wrapAround 开启此属性会让阴影变得柔和，分布均匀。
- wrapRGB 开启此属性，可以使用THREE.Vector3来控制光下降的速度。

var material = new THREE.MeshLambertMaterial({color: 0x7777ff});

6.THREE.MeshPhongMaterial(Phong材质)

这个材料除了MeshLambertMaterial属性外还有一些额外的出行
- specular 指定光照高亮部分的颜色，如果这个颜色与color属性的颜色相同，得到一个类似金属的材质。
- shininess 高亮部分的亮度。
- metal 开启后使材质更像金属。

var material = new THREE.MeshPhongMaterial({color: 0x7777ff});

这个效果非常好

7.THREE.LineBasicMaterial(线性基础材质)

这个材质可以为线设置材质，属性为
- color 定一线的颜色 如果指定vertexColors，这个属性会被忽略
- linewidth 该属性定义显得宽度
- linecap 该属性定义线端点如何显示
- linejoin 该属性定义线连接点如何显示
- vertexColors 将该属性设置成THREE.VertexColors值，可以给每一个定点设置颜色
- fog 设置是否雾化（需开启全局雾化）。

var material = new THREE.LineBasicMaterial({
    opacity: 1.0,
    line 1,
    vertexColors: THREE.VertexColors
});

8.THREE.LineDashMaterial(虚线材质)

该属性和线性基础材质几乎相同，额外的属性为
- scale 缩放dashSize和gapSize
- dashSize 虚线段长度
- gapSize 虚线空隙长度

var material = new THREE.LineDashedMaterial({
    vertexColors: true,
    color: 0xffffff,
    dashSize: 1,
    gapSize: 1,
     scale: 4
});

以上就是THREE的材质，具体如何使用我们日后在实战项目中讲解。