three.js材质大全
目录
- 材质(Material)
- MeshBasicMaterial
- MeshDepthMaterial
- MeshDistanceMaterial
- MeshMatcapMateria
- MeshNormalMaterial
- MeshFaceMaterial
- MeshLambertMaterial
- MeshPhongMaterial
- MeshToonMaterial
- MeshStandardMaterial
- MeshPhysicalMaterial
- SpriteMaterial
- ShaderMaterial
- LineBasicMaterial
- LineDashedMaterial
- 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使用的默认材质。