学习[threejs] 材质

130 阅读8分钟

材质

材质分类

基础类

名称解释
Materia材质基类

点材质

名称解释
PointsMaterial点材质
SpriteMaterial点精灵材质

线材质

名称解释
LineBasicMaterial基础线条材质
LineDashedMaterial虚线材质

网格材质

名称解释
MeshBasicMaterial基础网格材质
MeshDepthMaterial深度网格材质MeshDepthMaterialthree.js 库中的一种材质类型,用于将网格的外观设置为基于深度的颜色。深度是摄像机与网格表面之间的距离,它通常用于创建深度感或产生阴影效果。
MeshDepthMaterial 基于 ShaderMaterial 实现,它使用顶点着色器和片段着色器来计算基于深度的颜色。顶点着色器将摄像机位置传递给片段着色器,然后片段着色器使用摄像机位置和深度值来计算表面的颜色。您可以使用其他属性(例如颜色、透明度等)来进一步控制材质的外观。
使用 MeshDepthMaterial 材质,您可以创建一些有趣的效果,例如将网格表面分成不同的深度区域,并使用不同的颜色或纹理来表示这些区域。此外,它还可以用于创建简单的阴影效果,尤其是在场景中只有一个光源的情况下。
通常情况下,MeshDepthMaterial 主要用于在场景中创建深度感或简单的阴影效果。如果您需要更复杂的阴影效果,可以考虑使用 MeshStandardMaterialMeshPhongMaterial 材质,并结合阴影映射技术(例如 ShadowMaps)来实现。
MeshDistanceMaterial网格距离材质,内部透明MeshDistanceMaterial是一种基于“shaderMaterial”实现,因此可以自定义着色器程序,用来控制材质的外观,这个材质使用了顶点着色器和片元着色器,其中顶点着色器用于计算相机到各个顶点之间的距离,并将距离传递给片元着色器,片元着色器根据距离计算出物体的颜色并将其应用于物体的表面
MeshLamberMaterial兰伯特网格材质(漫反射)MeshLambertMaterialthree.js 库中的一种材质类型,用于将网格的外观设置为漫反射材质。它是一种基于物理学的材质,能够产生柔和、均匀的光照效果,并且可以与场景中的光源进行交互。
MeshLambertMaterial 基于 ShaderMaterial 实现,它使用顶点着色器和片段着色器来计算漫反射光照效果。顶点着色器将顶点位置、法线向量、摄像机位置和光源位置等数据传递给片段着色器,然后片段着色器使用这些数据来计算表面的颜色。您可以使用其他属性(例如颜色、透明度等)来进一步控制材质的外观。
使用 MeshLambertMaterial 材质,您可以创建具有柔和、均匀的光照效果的网格,这种效果比较适合用于创建表现真实世界中物体的材质。通常情况下,如果您想要创建表现真实世界中物体的材质,那么 MeshLambertMaterial 可能是一个不错的选择。
需要注意的是,MeshLambertMaterial 不支持镜面反射效果,如果您需要镜面反射效果,可以考虑使用 MeshPhongMaterialMeshStandardMaterial 材质。另外,如果您需要更高级的光照效果,例如全局光照或间接光照等,可以考虑使用 MeshStandardMaterial 材质,并结合较为复杂的光照计算技术(例如 PBR)来实现。
MeshMatcapMaterial马特卡普网格材质将材质外观设置为Matcap纹理。使其看上去具有高光反射效果。可以让模型看起来更有立体感。
MeshMatcapMaterial可以指定Matcap纹理和其他属性,Matcap纹理是一种特殊的纹理,可以用在每个像素上计算反射光的方向,因此Matcap纹理形状的颜色会直接影响反射的外观。MeshMatcapMaterial还允许您调整材质的其它属性,例如颜色,透明度,环境光等
Matcap纹理通常是预先制作好的图像文件
使用MeshMatcapMaterial材质,可以创建出非常逼真的表面材质,如金属,皮肤,塑料等
MeshNormalMaterial法线网格材质将网格的外观设置为基于法向向量的颜色,法线是垂直于表面的向量,他们用于计算光照和阴影,并在渲染过程中起到十分重要的作用。
MeshNormalMaterial基于ShaderMaterial实现,他们使用顶点着色器和片元着色器来计算基于法线向量的颜色,顶点着色器将法线向量传递给片段着色器,然后片段着色器使用法线向量来计算表面的颜色,我们可以通过指定不同的法线向量来改变网格的外观,并使用其他属性进一步控制材质的外观
使用该材质可以创建一些有趣的效果,如视觉法线向量,制作立体图像等,此外他还可以用于调试和检测网格中的法线向量是正确,但是该材质需要计算法线向量,因此比其他材质类型的计算更加密集,可能会影响性能
MeshPhongMaterial镜面(高光)网格材质,可以模拟玻璃质感MeshPhongMaterialthree.js 库中的一种材质类型,用于将网格的外观设置为具有镜面反射和光泽感的材质。它是一种基于物理学的材质,可以产生高亮度和光泽度的效果,并且可以与场景中的光源进行交互。
MeshPhongMaterial 基于 ShaderMaterial 实现,它使用顶点着色器和片段着色器来计算镜面反射和光泽感的效果。顶点着色器将顶点位置、法线向量、摄像机位置和光源位置等数据传递给片段着色器,然后片段着色器使用这些数据来计算表面的颜色和反射高光。您可以使用其他属性(例如颜色、透明度、镜面高光颜色等)来进一步控制材质的外观
使用 MeshPhongMaterial 材质,您可以创建具有高亮度和光泽感的网格,这种效果比较适合用于表现具有金属光泽或高光效果的物体。如果您需要表现具有高光效果的物体,那么 MeshPhongMaterial 可能是一个不错的选择。
需要注意的是,MeshPhongMaterial 的计算成本比较高,因此不适合用于在移动设备等性能较低的环境中使用。如果您需要在移动设备上使用具有高光效果的材质,可以考虑使用 MeshStandardMaterial 材质,并结合较为复杂的光照计算技术(例如 PBR)来实现。
MeshPhysicalMaterial物理网格材质,提供更高级物理渲染属性MeshPhysicalMaterialthree.js 库中的一种材质类型,用于将网格的外观设置为具有物理实现的材质。它是一种基于物理学的材质,可以产生高质量的光照效果,并且可以与场景中的光源进行交互。
MeshPhysicalMaterial 基于 ShaderMaterial 实现,它使用顶点着色器和片段着色器来计算高质量的光照效果。它支持实时阴影、反射、折射、环境光遮挡、透明度等功能,并且提供了一些高级选项,例如金属度、粗糙度、透明度等参数,让用户可以更加灵活地控制材质的外观。
使用 MeshPhysicalMaterial 材质,您可以创建具有高质量的光照效果的网格,这种效果比较适合用于表现真实世界中物体的材质。如果您需要创建高质量的光照效果,那么 MeshPhysicalMaterial 可能是一个不错的选择。
需要注意的是,MeshPhysicalMaterial 的计算成本比较高,因此不适合用于在移动设备等性能较低的环境中使用。另外,MeshPhysicalMaterial 需要在支持 WebGL 2.0 的浏览器上运行。如果您需要在移动设备上使用具有高质量光照效果的材质,可以考虑使用 MeshStandardMaterial 材质,并结合较为复杂的光照计算技术(例如 PBR)来实现。
MeshStandardMaterial基于物理渲染的材质MeshStandardMaterialthree.js 库中的一种材质类型,用于将网格的外观设置为具有基于物理的渲染(PBR)的材质。它是一种基于物理学的材质,可以产生高质量的光照效果,并且可以与场景中的光源进行交互。
MeshStandardMaterial 基于 ShaderMaterial 实现,它使用顶点着色器和片段着色器来计算高质量的光照效果。它支持实时阴影、反射、折射、环境光遮挡、透明度等功能,并且提供了一些高级选项,例如金属度、粗糙度、透明度等参数,让用户可以更加灵活地控制材质的外观。
使用 MeshStandardMaterial 材质,您可以创建具有高质量的光照效果的网格,这种效果比较适合用于表现真实世界中物体的材质。如果您需要创建具有高质量光照效果的物体,那么 MeshStandardMaterial 可能是一个不错的选择。
相比于 MeshPhongMaterialMeshPhysicalMaterialMeshStandardMaterial 计算成本较低,并且不需要在支持 WebGL 2.0 的浏览器上运行。因此,如果您需要在移动设备等性能较低的环境中使用具有高质量光照效果的材质,可以考虑使用 MeshStandardMaterial 材质。

着色器材质

名称解释
RawShaderMaterial原始着色器材质
ShaderMaterial着色器材质

阴影材质

名称解释
ShadowMaterial阴影材质

网格材质