0%

three.js中的材质

1. MeshStandardMaterial

  • 用途:基于物理渲染(PBR),适用于追求真实感的场景,支持金属度、粗糙度、环境光遮蔽(AO)、法线贴图等。
  • 优势:高度逼真,支持复杂光照模型,适合高质量渲染。
  • 缺点:计算开销较大,不适合性能敏感的场景。

    2. MeshLambertMaterial

  • 用途:基于 Lambert 反射模型,是一种简化的漫反射材质,不考虑高光或复杂反射。
  • 优势:计算简单,性能好,适合非金属、低光要求的物体。
  • 缺点:缺乏真实感,不支持法线贴图、金属度等高级特性。

    3. MeshPhongMaterial

  • 用途:基于 Phong 反射模型,支持高光反射,可以模拟塑料、漆面等材质。
  • 优势:比 Lambert 更真实,支持高光和法线贴图。
  • 缺点:不是基于物理的渲染,效果不如 PBR 自然。

    4. MeshDepthMaterial

  • 用途:不显示颜色,只渲染深度信息(相机到物体的距离) QQs按:接近近投影面(camera.near)变明亮反之变暗 适合做雾效 寂静岭阴森视距。
  • 优势:常用于后期处理、阴影生成、深度图分析等。
  • 缺点:不适用于常规物体渲染。

    5. MeshNormalMaterial

  • 用途:显示法线方向,用于调试或特殊视觉效果。
  • 优势:便于检查模型的法线是否正确。
  • 缺点:无法用于真实渲染。

性能与适用场景的权衡

  • 性能优化:在移动端或低性能设备上,使用 MeshLambertMaterialMeshBasicMaterial 可以显著提高渲染性能,而 MeshStandardMaterial 由于其复杂的光照计算,可能会造成帧率下降。

  • 特殊效果:例如,MeshDepthMaterial 可用于实现深度边缘检测、雾效或自定义的后期处理效果,这些是 MeshStandardMaterial 无法直接实现的。

  • 艺术风格:某些风格化渲染(如卡通渲染)更适合使用 MeshToonMaterial,而不是 PBR 材质。

三、兼容性与历史原因

  • Three.js 作为一个成熟的 3D 渲染库,需要兼容多种渲染管线和设备。一些材质(如 MeshLambertMaterialMeshPhongMaterial)在早期版本中就已经存在,它们为不支持 PBR 的设备或项目提供了替代方案。
  • 在 WebGL 1.0 环境下,某些高级特性(如 PBR)可能不被完全支持,此时需要使用更简单的材质。

四、实际开发中的选择建议

材质类型 适用场景 是否支持贴图 性能
MeshStandardMaterial 高质量渲染、PBR 场景 支持所有贴图 较低
MeshLambertMaterial 简单漫反射、低性能设备 仅支持漫反射贴图 较高
MeshPhongMaterial 高光材质、塑料效果 支持高光、法线贴图 中等
MeshDepthMaterial 深度分析、后期处理 不支持颜色贴图
MeshNormalMaterial 法线调试、特殊效果 不支持颜色贴图

roughMap vs displacementMap
前者是PBR即作用于光线反射 后者是作用于顶点位移