Three.js拨云见雾(3)——使用材质

这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战

一个材质结合THREE.Geometry对象，可以构成THREE.Mesh对象。材质就像物体的皮肤，决定了几何体的外表。例如，皮肤定义了一个几何体看起来是否像金属、透明与否，或者显示为线框。然后得到的THREE.Mesh对象才可以添加到Three.js渲染的场景中。

Three.js中材质分为点材质、线材质、网格材质、精灵材质等。接下来，我们通过一些常见的具体的材质兑现来快速的了解Three.js如何使用这些材质。

理解材质的共有属性： Three.js提供了一个材质基类THREE.Material，它列出了所有的共有属性。这些共有属性大致可以分为基础属性，融合属性以及高级属性。这里不会详细讲每个属性的用法和作用，只会说一些常用的属性，其他的用到的时候自查即可。

点材质PointsMaterial

点材质比较简单，只有PointsMaterial,通常在使用点模型的时候会使用点材质PointsMaterial。它的size属性可以设置每个顶端渲染的方形区域尺寸像素大小。

//创建一个球体几何对象 
let geometry = new THREE.SphereGeometry(100, 25, 25); 
// 创建一个点材质对象 
let material = new THREE.PointsMaterial({ 
    color: 0x0000ff, //颜色 
    size: 3, //点渲染尺寸
}); 
//点模型对象 参数：几何体 点材质 
let point = new THREE.Points(geometry, material); 
//网格模型添加到场景中
scene.add(point); 
复制代码

线材质LineBasicMaterial和LineDashedMaterial

线材质有基础线材质LineBasicMaterial和虚线材质LineDashedMaterial两个，通常在使用Line等线模型是才会用到线材质。

• LineBasicMaterial:可以设置colors、linewidth、linecap、linejoin属性
• LineDashedMaterial:属性跟LineBasicMaterial一样，另外，它可以通过指定虚线和空白间隙的长度来创建出虚线效果。

基础线材质LineBasicMaterial

//球体 
let geometry = new THREE.SphereGeometry(100, 25, 25);
// 直线基础材质对象 
let material = new THREE.LineBasicMaterial({ 
    color: 0x0000ff
}); 
//线模型对象 
let line = new THREE.Line(geometry, material); 
//点模型添加到场景中
scene.add(line); 
复制代码

虚线材质LineDashedMaterial

// 虚线材质对象：产生虚线效果 
let material = new THREE.LineDashedMaterial({ 
    color: 0x0000ff, 
    dashSize: 10,//显示线段的大小。默认为3。 
    gapSize: 5,//间隙的大小。默认为1
}); 
//线模型对象
let line = new THREE.Line(geometry, material);  
// computeLineDistances方法 计算LineDashedMaterial所需的距离数组 line.computeLineDistances();
//点模型添加到场景中
scene.add(line); 
复制代码

网格模型

Threejs提供的网格类材质比较多，网格材质涉及的材质种类和材质属性也比较多，这篇文章会带大家了解一些简单的网格材质对象以达到抛砖引玉的效果。通常在网格类模型才会使用的材质对象。

基础网格材质对象MeshBasicMaterial,不受带有方向光源影响，没有棱角感。

let material = new THREE.MeshBasicMaterial({ color: 0x0000ff, })
复制代码

MeshLambertMaterial材质可以实现网格Mesh表面与光源的漫反射光照计算，有了光照计算，物体表面分界的位置才会产生棱角感。这种材质可以用来创建暗淡的并不光亮的表面，会对场景中的光源产生反应。

let material = new THREE.MeshLambertMaterial({ color: 0x00ff00, });
复制代码

高光网格材质MeshPhongMaterial除了和MeshLambertMaterial一样可以实现光源和网格表面的漫反射光照计算，还可以产生高光效果(镜面反射)。通过THREE.MeshPhongMaterial可以创建一种光亮的材质。它是唯一一种可以在物体表面实现高光效果的材质。既可以模拟塑料质感，也可以在一定程度上模拟金属质感。

let material = new THREE.MeshPhongMaterial({ 
    color: 0xff0000, 
    specular:0x444444,//高光部分的颜色 
    shininess:20,//高光部分的亮度，默认30
});
复制代码

新版的Three.js中提供了两个新型材质:THREE.MeshStandardMaterial(标准材质)和THREE.MeshPhysicalMaterial(物理材质)。使用这两个可以实现更加接近真实世界的渲染效果。所以在使用MeshPhongMaterial之前，可以考虑使用新的API。

THREE.MeshStandardMaterial这种材质使用更加正确的物理计算来决定物体表面如何与场景中的光源互动。这种材质不但能够更好地表现塑料质感和金属质感的表面，而且提供两个新属性来供开发者使用：

• metalness: 金属感程度。该属性控制物体表面的金属感程度。0表示完全塑料质感，1表示完全金属质感，默认值为0.5。
• roughness: 粗糙程度。该属性控制物体表面的粗糙程度。在视觉上，它决定表面对入射光的漫反射的程度。默认值为0.5，当值为0的时候会产生类似镜面的反射，为1时会产生完全的漫反射效果。

THREE.MeshPhysicalMaterial与THREE.MeshStandardMaterial非常相似，但是提供了对反光度的更多控制。

不过这两种新材质在不动手实验的情况下，也难以确定什么样的参数值才能符合某种特定需求。因此最佳的实践方式给程序增加有结果UI，并通过一遍调节参数一边观察的方法来寻找最满意的参数组合。

总结

Three.js提供了很多材质用于给几何体指定皮肤。本文用简洁的话讲了一些简单的材质对象，为的就是更快的了解材质的用法，学有余力的同学大可以看一下THREE.ShaderMaterial，它是一个自定义着色器，可以提供自己的顶点着色器和像素着色器程序。

不是所有的材质都会对场景中的光源做出反应。如果希望一个材质计算光照的影响，应该尽量使用标准材质THREE.MeshStandardMaterial。当我们需要更多控制时，可以考虑使用THREE.MeshPhysicalMaterial和THREE.MeshPhongMaterial,或者THREE.MeshLambertMaterial。

以上就是今天的全部内容了，感谢大家点赞、关注和收藏。