新手如何选择Three.js材质

火车叼位
248 阅读10分钟

在 Three.js 开发中，选择合适的材质至关重要。材质的选择直接影响场景的视觉效果和性能表现。然而，Three.js 提供的材质种类繁多，每种材质都有其独特的属性和适用场景。开发者，尤其对 Three.js 还比较陌生的开发者，常常难以快速选择合适的材质，需要花费大量时间查阅文档和进行实验。 为了解决这个问题，我整理了这份材质卡片，旨在提供一个快速参考指南，帮助开发者快速了解各种材质的特点，从而做出更明智的选择。

这份 Three.js 材质卡片可以帮助以下人群：

  • Three.js 初学者: 快速了解 Three.js 的各种材质，避免在材质选择上走弯路。
  • 前端开发者: 提高 Three.js 开发效率，快速找到合适的材质，实现所需的视觉效果。
  • 游戏开发者: 根据游戏场景和性能需求选择合适的材质。
  • 3D 艺术家: 更好地理解不同材质的特性，创作更具表现力的作品。
  • 任何使用 Three.js 进行 3D 开发的人: 作为一份便捷的参考指南，随时查阅各种材质的信息。

属性列表格式

MeshBasicMaterial

  • 光照影响: 无
  • 镜面高光: 无
  • 物理渲染 (PBR): 否
  • 特点:
    • 最简单，计算量最低。
    • 只显示颜色或纹理，不受光照影响。
    • 颜色均匀，没有明暗变化。
  • 适用场景:
    • 简单几何体，如占位符、简单的UI元素。
    • 对性能要求极高的场景，例如移动端、低配置设备。
    • 不需要光照效果的物体。
  • 性能消耗: 最低

MeshLambertMaterial

  • 光照影响: 有
  • 镜面高光: 无
  • 物理渲染 (PBR): 否
  • 特点:
    • 考虑漫反射的光照模型，模拟光线在粗糙表面的散射。
    • 具有柔和的阴影效果。
    • 性能比 MeshPhongMaterial 略高，但不如 MeshBasicMaterial。
  • 适用场景:
    • 表现粗糙、不光滑的物体表面，如布料、泥土、纸张等。
    • 需要基本光照效果但对高光没有要求的场景。
  • 性能消耗: 中等

MeshPhongMaterial

  • 光照影响: 有
  • 镜面高光: 有
  • 物理渲染 (PBR): 否
  • 特点:
    • 除了漫反射外，还模拟镜面反射，产生高光。
    • 高光效果可调整，用于表现光滑表面。
    • 性能消耗高于 MeshLambertMaterial。
  • 适用场景:
    • 表现光滑的物体表面，如塑料、抛光金属、陶瓷等。
    • 需要明显高光效果的场景。
  • 性能消耗: 中等

MeshStandardMaterial

  • 光照影响: 有
  • 镜面高光: 有
  • 物理渲染 (PBR): 是
  • 特点:
    • 基于物理的渲染（PBR）模型，提供更真实的材质表现。
    • 通过 roughness（粗糙度）和 metalness（金属度）参数控制表面属性。
    • 渲染效果逼真，更符合真实世界的光照和材质反应。
    • 是现代 Three.js 开发的首选材质。
  • 适用场景:
    • 大部分需要真实感的物体和场景。
    • 产品展示、建筑可视化等需要高质量渲染的场景。
    • 模拟各种真实材质，如木材、金属、塑料、皮革等。
  • 性能消耗: 较高

MeshPhysicalMaterial

  • 光照影响: 有
  • 镜面高光: 有
  • 物理渲染 (PBR): 是
  • 特点:
    • 是 MeshStandardMaterial 的扩展，提供更多物理属性控制。
    • 包含 clearcoat（清漆层）、reflectivity（反射率）、transmission（透射率，用于玻璃等材质）等高级属性。
    • 可以实现更精细和真实的材质效果。
    • 渲染消耗比 MeshStandardMaterial 略高。
  • 适用场景:
    • 需要精确物理效果的场景，如汽车漆、玻璃、液体等。
    • 高级渲染、电影级渲染需求。
    • 需要对材质的物理属性进行精细控制的场合。
  • 性能消耗: 较高

MeshToonMaterial

  • 光照影响: 有
  • 镜面高光: 无
  • 物理渲染 (PBR): 否
  • 特点:
    • 实现卡通渲染效果，也称为 Cel Shading。
    • 具有明显的明暗分界线，模拟手绘动画风格。
    • 可以自定义明暗区域的颜色和数量。
  • 适用场景:
    • 卡通风格的游戏、动画、插画等。
    • 需要非真实感渲染效果的场景。
    • 需要突出物体轮廓和鲜明色彩的风格化渲染。
  • 性能消耗: 中等

ShaderMaterial

  • 光照影响: 自定义
  • 镜面高光: 自定义
  • 物理渲染 (PBR): 可自定义
  • 特点:
    • 灵活性最高，可以完全自定义渲染过程。
    • 使用 GLSL (OpenGL Shading Language) 编写顶点着色器和片元着色器。
    • 可以实现各种特殊效果和高级渲染技术，如后期处理、程序化纹理等。
    • 需要一定的着色器编程知识。
  • 适用场景:
    • 特殊视觉效果、艺术效果的实现。
    • 高级渲染技术，如体积渲染、流体模拟等。
    • 性能优化，针对特定硬件进行定制。
    • 任何内置材质无法满足的特殊渲染需求。
  • 性能消耗: 视着色器复杂度而定

LineBasicMaterial

  • 光照影响: 无
  • 镜面高光: 无
  • 物理渲染 (PBR): 否
  • 特点:
    • 用于 THREE.Line，创建简单的、颜色均匀的直线。
    • 性能消耗极低。
  • 适用场景:
    • 简单的线条、辅助线、坐标轴等。
    • 对性能要求极高的场景中表示线段。
  • 性能消耗: 低

LineDashedMaterial

  • 光照影响: 无
  • 镜面高光: 无
  • 物理渲染 (PBR): 否
  • 特点:
    • 用于 THREE.Line，创建虚线效果。
    • 可以自定义虚线的线段长度和间隔。
    • 性能消耗较低。
  • 适用场景:
    • 表示虚线、分割线、路径等。
    • 需要区分不同类型的线条时。
  • 性能消耗: 低

PointsMaterial

  • 光照影响: 无
  • 镜面高光: 无
  • 物理渲染 (PBR): 否
  • 特点:
    • 用于 THREE.Points，控制点的大小和颜色。
    • 可以创建粒子效果和点云。
    • 点的大小可以固定或随深度衰减。
  • 适用场景:
    • 粒子特效，如烟雾、火焰、星空等。
    • 可视化点云数据。
    • 数量较少的独立点的表示。
  • 性能消耗: 较高 (大量点)

SpriteMaterial

  • 光照影响: 无
  • 镜面高光: 无
  • 物理渲染 (PBR): 否
  • 特点:
    • 用于 THREE.Sprite，显示二维图像。
    • 始终面向摄像机，不受物体旋转影响。
    • 常用于制作 UI 元素、图标、广告牌等。
    • 可以设置贴图、颜色、透明度等属性。
  • 适用场景:
    • UI 元素，如按钮、标签、图标等。
    • 游戏中的角色、道具等 2D 精灵。
    • 广告牌、标记物等需要始终朝向观察者的元素。
  • 性能消耗: 低

ShadowMaterial

  • 光照影响: 无
  • 镜面高光: 无
  • 物理渲染 (PBR): 否
  • 特点:
    • 专门用于接收阴影，使接收阴影的平面透明，只显示阴影。
    • 常用于模拟地面接收阴影的效果。
    • 需要配合灯光和开启阴影投射的物体使用。
  • 适用场景:
    • 模拟物体投射在地面或其他表面上的阴影。
    • 使场景中的阴影效果更加真实自然。
  • 性能消耗: 低

表格格式

材质名称光照影响镜面高光物理渲染 (PBR)特点适用场景性能消耗
MeshBasicMaterial无无否1. 最简单，计算量最低。
2. 只显示颜色或纹理，不受光照影响。
3. 颜色均匀，没有明暗变化。		1. 简单几何体，如占位符、简单的UI元素。
2. 对性能要求极高的场景，例如移动端、低配置设备。
3. 不需要光照效果的物体。		最低
MeshLambertMaterial有无否1. 考虑漫反射的光照模型，模拟光线在粗糙表面的散射。
2. 具有柔和的阴影效果。
3. 性能比 MeshPhongMaterial 略高，但不如 MeshBasicMaterial。		1. 表现粗糙、不光滑的物体表面，如布料、泥土、纸张等。
2. 需要基本光照效果但对高光没有要求的场景。		中等
MeshPhongMaterial有有否1. 除了漫反射外，还模拟镜面反射，产生高光。
2. 高光效果可调整，用于表现光滑表面。
3. 性能消耗高于 MeshLambertMaterial。		1. 表现光滑的物体表面，如塑料、抛光金属、陶瓷等。
2. 需要明显高光效果的场景。		中等
MeshStandardMaterial有有是1. 基于物理的渲染（PBR）模型，提供更真实的材质表现。
2. 通过 roughness（粗糙度）和 metalness（金属度）参数控制表面属性。
3. 渲染效果逼真，更符合真实世界的光照和材质反应。
4. 是现代 Three.js 开发的首选材质。		1. 大部分需要真实感的物体和场景。
2. 产品展示、建筑可视化等需要高质量渲染的场景。
3. 模拟各种真实材质，如木材、金属、塑料、皮革等。		较高
MeshPhysicalMaterial有有是1. 是 MeshStandardMaterial 的扩展，提供更多物理属性控制。
2. 包含 clearcoat（清漆层）、reflectivity（反射率）、transmission（透射率，用于玻璃等材质）等高级属性。
3. 可以实现更精细和真实的材质效果。
4. 渲染消耗比 MeshStandardMaterial 略高。		1. 需要精确物理效果的场景，如汽车漆、玻璃、液体等。
2. 高级渲染、电影级渲染需求。
3. 需要对材质的物理属性进行精细控制的场合。		较高
MeshToonMaterial有无否1. 实现卡通渲染效果，也称为 Cel Shading。
2. 具有明显的明暗分界线，模拟手绘动画风格。
3. 可以自定义明暗区域的颜色和数量。		1. 卡通风格的游戏、动画、插画等。
2. 需要非真实感渲染效果的场景。
3. 需要突出物体轮廓和鲜明色彩的风格化渲染。		中等
ShaderMaterial---1. 灵活性最高，可以完全自定义渲染过程。
2. 使用 GLSL (OpenGL Shading Language) 编写顶点着色器和片元着色器。
3. 可以实现各种特殊效果和高级渲染技术，如后期处理、程序化纹理等。
4. 需要一定的着色器编程知识。		1. 特殊视觉效果、艺术效果的实现。
2. 高级渲染技术，如体积渲染、流体模拟等。
3. 性能优化，针对特定硬件进行定制。
4. 任何内置材质无法满足的特殊渲染需求。		视着色器复杂度而定
LineBasicMaterial无无否1. 用于 THREE.Line，创建简单的、颜色均匀的直线。
2. 性能消耗极低。		1. 简单的线条、辅助线、坐标轴等。
2. 对性能要求极高的场景中表示线段。		低
LineDashedMaterial无无否1. 用于 THREE.Line，创建虚线效果。
2. 可以自定义虚线的线段长度和间隔。
3. 性能消耗较低。		1. 表示虚线、分割线、路径等。
2. 需要区分不同类型的线条时。		低
PointsMaterial无无否1. 用于 THREE.Points，控制点的大小和颜色。
2. 可以创建粒子效果和点云。
3. 点的大小可以固定或随深度衰减。		1. 粒子特效，如烟雾、火焰、星空等。
2. 可视化点云数据。
3. 数量较少的独立点的表示。		较高 (大量点)
SpriteMaterial无无否1. 用于 THREE.Sprite，显示二维图像。
2. 始终面向摄像机，不受物体旋转影响。
3. 常用于制作 UI 元素、图标、广告牌等。
4. 可以设置贴图、颜色、透明度等属性。		1. UI 元素，如按钮、标签、图标等。
2. 游戏中的角色、道具等 2D 精灵。
3. 广告牌、标记物等需要始终朝向观察者的元素。		低
ShadowMaterial无无否1. 专门用于接收阴影，使接收阴影的平面透明，只显示阴影。
2. 常用于模拟地面接收阴影的效果。
3. 需要配合灯光和开启阴影投射的物体使用。		1. 模拟物体投射在地面或其他表面上的阴影。
2. 使场景中的阴影效果更加真实自然。		低
avatar
文章
阅读
粉丝