webGL之three.js入门3--材料篇

Posted 2020-09-22 搭错车的小火柴

这几天在看李鹏程翻译的[美]Jos Dirksen的《Three.js开发指南》，看到第八章了，现在来总结一下threejs中材料的相关知识。顺带也看完了上海交大的张雯莉出的《threejs入门指南》，我所学所写都是基于书和threejs官网的一些例子。

这两本书的电子版：链接: http://pan.baidu.com/s/1hrTqJGg 密码: e8ay

---

 Threejs r85版的材质解析：

相比之前的版本代码，新版本有所改动，各位同学看书的时候，最好对照着Github上面最新的代码。

LineBasicMaterial：可以用于THREE.Line几何体，从而创建着色的直线。 

LineDashedMaterial：类似line基础材质，但可以创建虚线效果。

MeshBasicMaterial（网格基础材质）：为几何体赋予一种简单的颜色，或者显示几何体的线框 。忽略光线的作用，是什么颜色，就直接显示什么颜色，但也由于这种材质忽略了光照的作用，那么它也不会有任何阴影的效果。

MeshDepthMaterial（网格深度材质）：根据网格到相机的距离，该材质决定如何给网格染色 ，根据物体上每一点到摄像机的远近来显示颜色，远的显示黑色，近的显示白色。

 

MeshNormalMaterial（网格法向材质）：根据物体表面的法向量计算颜色 ,决定光的发射方向、在计算光照、阴影时提供信息、为物体表面上色。法向量所指的方向决定每个面从MeshNormalMaterial材质获取的颜色。在平面上添加表示法向量的箭头：使用THREE.ArrowHelper。

 

MeshLambertMaterial（网格朗伯材质）：考虑光照的影响，可以创建颜色暗淡，不光亮的物体 。ambient：对环境光的反射能力 ，和AmbientLight光源一起使用。该颜色会与AmbientLight光源的颜色相乘。默认是白色。 emissive：该材质发射的属性。材质的自发光颜色，可以用来表现光源的颜色 。不像是光源，只是一种纯粹的、不受其他光照影响的颜色。默认是黑色。Lambert 材质（MeshLambertMaterial）是符合 Lambert 光照模型的材质。 Lambert 光照模型的主要特点是只考虑漫反射而不考虑镜面反射的效果，因而对于金属、镜子等需要镜面反射效果的物体就不适应，对于其他大部分物体的漫反射效果都是适用的。
Idiffuse = Kd * Id * cos(theta) ，Idiffuse 是漫反射光强， Kd 是物体表面的漫反射属性， Id 是光强， theta 是光的入射角弧度。

 

MeshPhongMaterial（网格phong式材质=镜面反射材质）：考虑光照的影响，可以创建光亮的物体 。对于金属、镜面的表现尤为适合。 specular：指定该材质的光亮程度及其高光部分的颜色。如果将他设置成跟color属性相同的颜色，将会得到一种更加类似金属的材质。如果设置为灰色，材质将变得更像塑料。 
Ispecular = Ks * Is * (cos(alpha)) ^ n ，Ispecular 是镜面反射的光强， Ks 是材质表面镜面反射系数， Is 是光源强度，alpha 是反射光与视线的夹角， n 是高光指数，越大则高光光斑越小。 shininess 属性控制光照模型中的 n 值。

 

MeshFaceMaterial（网格面材质）：这是一种容器，可以在该容器中为物体的各个表面上设置不同的颜色 。

 

ShaderMaterial（着色器材质）：使用自定义的着色器程序，直接控制顶点的放置方式，以及像素的着色方式。个人觉得这个比较复杂，但是应用应该比其他几种都要广泛一点，需要一些webGL的基础。

 

SpriteMaterial： 粒子材质，适用于粒子系统，用来模拟雪花小雨什么的。

 

---

 补充：R69以后，粒子系统中的ParticleBasicMaterial 重命名为PointCloudMaterial，ParticleSystem重命名为PointCloud，貌似删掉了Particle这个组件，粒子系统里面只用Sprite。