three.js材质大全

three.js材质大全

目录

1. 材质(Material)
2. MeshBasicMaterial
3. MeshDepthMaterial
4. MeshDistanceMaterial
5. MeshMatcapMateria
6. MeshNormalMaterial
7. MeshFaceMaterial
8. MeshLambertMaterial
9. MeshPhongMaterial
10. MeshToonMaterial
11. MeshStandardMaterial
12. MeshPhysicalMaterial
13. SpriteMaterial
14. ShaderMaterial
15. LineBasicMaterial
16. LineDashedMaterial
17. PointsMaterial

1.材质(Material)

• 材质的抽象基类。
• 材质描述了对象objects的外观。它们的定义方式与渲染器无关， 因此，如果您决定使用不同的渲染器，不必重写材质。
• 所有其他材质类型都继承了以下属性和方法（尽管它们可能具有不同的默认值）。

2.MeshBasicMaterial

一个以简单着色（平面或线框）方式来绘制几何体的材质。这种材质不受光照的影响。
属性：

• color：颜色
• wireframe：是否显示线框
• wireframeLinewidth：线框线宽度
• wireframeLinecap：线段端点如何显示。可选值有：butt（平）、round、square。默认是round。WebGLRenderer对象不支持该属性。
• wireframeLinejoin：线段连接点如何显示。可选值有：round、bevel（斜角）、miter（尖角）。默认是round。WebGLRenderer对象不支持属性。
• shading：着色模式。可选值：THREE.SmoothShading、THREE.FlatShading。
• vertexColors：为每个顶点定义不同的颜色。在CanvasRenderer对象中不起作用。
• fog：指示当前是否会受全局雾化效果设置的影响。

3.MeshDepthMaterial

• 一种按深度绘制几何体的材质。深度基于相机远近平面。白色最近，黑色最远。
• 使用这种材质的物体，其外观不是由光照或某个材质属性决定的；而是由物体到相机的距离决定的。可以将这种材质与其他材质相结合，从而很容易创建逐渐消失的效果。
• 只有两个控制线框的属性：wireframe,wireframeLinewidth
• 可以通过设置相机的near和far的值，来控制创建中使用这种材质的物体的消失速度。如果near和fat之间的差值越大，那么物体远离相机时，只会稍微消失一点；反之，物体消失的效果非常明显。
• 注意：没有颜色属性

4.MeshDistanceMaterial

• 主要用于通过PointLight光源实现阴影映射。
• 通过将MeshDistanceMaterial的实例分配给Object3D.customDistanceMaterial，还可以用于自定义对象的阴影投射。

5.MeshMatcapMateria

• 由MatCap（或Lit Sphere）纹理定义，该纹理编码材质的颜色和阴影（理解这种材质的关键！）。
• 由于Matcap图像文件对烘焙的照明进行编码，因此MeshMatcapMaterial对灯光不响应。它将阴影投射到接收阴影的对象上（并且进行阴影修剪），但不会自阴影或接收阴影。

6.MeshNormalMaterial

• 根据物体表面的法向量计算颜色
• 法向量的作用： 决定光的发射方向、在计算光照、阴影时提供信息、为物体表面上色。
• 法向量所指的方向决定每个面从MeshNormalMaterial材质获取的颜色。

7.MeshFaceMaterial

• 这是一种容器，可以在该容器中为物体的各个表面上设置不同的颜色。
• 可以为几何体的每一个面指定不同的材质。
• 假设有一个正方体，可以为每个面指定不同的颜色。

8.MeshLambertMaterial

• 一种非光泽表面的材质，没有镜面高光。

• 该材质使用基于非物理的Lambertian模型来计算反射率。

• 这可以很好地模拟一些表面（例如未经处理的木材或石材），但不能模拟具有镜面高光的光泽表面（例如涂漆木材）。

• 使用Gouraud着色模型计算着色。这将计算每个顶点的着色 （即在vertex shader中）并在多边形的面上插入结果。

• 基本属性：color、opacity、shading、blending、depthTest、depthWrite、wireframe、wireframeLineWith、wirefLinecap、wireframeLinejoin、vertexColors、fog。

• 独特属性：
  ambient：和AmbientLight光源一起使用。该颜色会与AmbientLight光源的颜色相乘。默认是白色。
  emissive：该材质发射的属性。不像是光源，只是一种纯粹的、不受其他光照影响的颜色。默认是黑色。

9.MeshPhongMaterial

• 该材质使用非物理的Blinn-Phong模型来计算反射率。

• 与MeshLambertMaterial的区别是，该材质可以模拟具有镜面高光的光泽表面（例如涂漆木材）。

• 使用Phong着色模型计算着色时，会计算每个像素的阴影（在fragment shader， AKA pixel
  shader中），与MeshLambertMaterial使用的Gouraud模型相比，该模型的结果更准确，但代价是牺牲一些性能。

• MeshStandardMaterial和MeshPhysicalMaterial也使用这个着色模型。

• 独特属性：
  ambient
  emissive
  specular：指定该材质的光亮程度及其高光部分的颜色。如果将他设置成跟color属性相同的颜色，将会得到一种更加类似金属的材质。如果设置为灰色，材质将变得更像塑料。
  shininess：指定高光部分的亮度。默认是30.

10.MeshToonMaterial

• MeshPhongMaterial卡通着色的扩展。

11.MeshStandardMaterial

• 一种基于物理的标准材质，使用Metallic-Roughness工作流程。

• 基于物理的渲染（PBR）最近已成为许多3D应用程序的标准，例如Unity， Unreal和 3D Studio Max。
  这种方法与旧方法的不同之处在于，不使用近似值来表示光与表面的相互作用，而是使用物理上正确的模型。

• 我们的想法是，不是在特定照明下调整材质以使其看起来很好，而是可以创建一种材质，能够“正确”地应对所有光照场景。 在实践中，该材质提供了比MeshLambertMaterial 或MeshPhongMaterial 更精确和逼真的结果，代价是计算成本更高。

• 计算着色的方式与MeshPhongMaterial相同，都使用Phong着色模型。

12.MeshPhysicalMaterial

• MeshStandardMaterial的扩展，能够更好地控制反射率。

13.SpriteMaterial

• 一种使用Sprite的材质。
• 粒子、点云使用的材质。

14.ShaderMaterial

• 使用自定义的着色器程序，直接控制顶点的放置方式，以及像素的着色方式。

• 独特属性：
  fragmentShader：定义每个传入的像素的颜色。 vertexShader：允许你修改每一个传入的顶点的位置
  uniforms：该属性可以向你的着色器发送消息。将同样的信息发送到每一个顶点和片段。
  defines：该属性可以转换为vertexShader和fragmentShader里的#define代码。该属性可以用来设置着色器程序里的一些全局变量。
  attributes：该属性可以修改每个顶点和片段。常用来传递位置数据和法向量相关的数据。如果要用这个属性，辣么你要为几何体中的所有顶点提供信息。
  lights：定义光照数据是否传递给着色器。默认是false。

• 注意：这是一个很强大的东西，需要学习shader的相关知识，这里先不讨论，记一下他的属性即可。现在只要记住这个东西很强大，所有已有材质模拟不出来的东西，都要用这个来解决。

15.LineBasicMaterial

• 可以用于THREE.Line几何体，从而创建着色的直线
• 属性：
  color
  lineWidth
  LineCap：butt、round、square。默认是round。WebGLRenderer不支持该属性。
  LineJoin：round、bevel（斜切）、miter（尖角）。默认是round。WebGLRenderer不支持该属性。
  vertexColors：该属性值设置THREE.VertexColors值时，就可以为每个顶点指定一种颜色。
  fog：指定当前物体是否受全局雾化效果的影响。

16.LineDashedMaterial

• 类似与线基础材质，但可以创建虚线效果
• 和LineBasicMaterial有着一样的属性，但是有几个额外的属性，可以用来定义短划线长度和短划线中间空格长度的属性。
  独特属性：
• 加粗样式
  scale：缩放dashSize和gapSize。如果scale<1，则dashSize和gapSize就会增大。
  dashSize：短线划的长度 gapSize：间隔的长度

17.PointsMaterial

• Points使用的默认材质。