返回

Three.js PBR 材质大师班：深入了解金属度、粗糙度和环境贴图

前端

揭开 PBR 材质的面纱

物理渲染（PBR）是一种先进的着色技术，旨在通过模拟真实世界的光照行为来创建逼真的 3D 图形。PBR 材质利用一系列参数来定义材质的外观和响应光照的方式，从而实现令人惊叹的真实感。

金属度：闪亮还是哑光

金属度属性决定了材质对光的反射方式。范围从 0.0（非金属）到 1.0（金属）。较高的金属度值会导致更多镜面反射，产生光滑闪亮的表面，如抛光金属。较低的金属度值产生更多的漫反射，产生哑光效果，如木材或石材。

粗糙度：光滑还是凹凸不平

粗糙度属性控制材质表面的光滑度。范围从 0.0（光滑）到 1.0（粗糙）。较低的粗糙度值产生光滑的表面，导致清晰的光泽反射。较高的粗糙度值产生粗糙的表面，产生更分散的光线反射。

环境贴图：捕捉周围环境

环境贴图允许材质从周围环境中反射光线，从而创建逼真的间接光照效果。这些贴图通常是 HDR（高动态范围）图像，捕获了 360 度的环境。材质表面会反射环境贴图中的信息，模拟真实世界中光线的交互作用。

金属度和粗糙度相互作用

金属度和粗糙度属性相互作用，创造出广泛的材质外观。

  • 金属光泽： 高金属度和低粗糙度会导致强烈的镜面反射，类似于抛光金属。
  • 金属丝状： 高金属度和高粗糙度产生更分散的光泽反射，类似于拉丝金属。
  • 非金属光滑： 低金属度和低粗糙度产生光滑的非金属表面，如釉面陶瓷。
  • 非金属粗糙： 低金属度和高粗糙度导致更漫反射的非金属表面，如砂纸。

环境贴图的使用

环境贴图可以通过以下方式增强 PBR 材质：

  • 逼真间接光照： 反射环境贴图中的光线，创建逼真的间接光照，模仿真实世界中光线的反弹。
  • 材质多样性： 赋予材质以环境影响，通过从周围环境反射颜色和光线来创建不同的外观。
  • 动态照明： 环境贴图可以随着场景中光照的变化而更新，从而提供动态的间接光照效果。

掌握金属度、粗糙度和环境贴图

通过了解和运用金属度、粗糙度和环境贴图，您可以提升 Three.js 渲染的真实感和沉浸感。这些属性赋予您控制材质外观的强大力量，从闪亮的金属到粗糙的石头，应有尽有。

在掌握了这些基本概念之后，您可以将这些知识应用于各种场景中，从逼真的 3D 模型到引人入胜的虚拟环境。Three.js 为您提供了探索 PBR 材质的无限可能性，解锁您数字创作的全部潜力。

附录：代码示例

以下代码示例展示了如何在 Three.js 中使用金属度、粗糙度和环境贴图：

// 加载金属度贴图和粗糙度贴图
const metalnessMap = new THREE.TextureLoader().load('metalness.jpg');
const roughnessMap = new THREE.TextureLoader().load('roughness.jpg');

// 加载环境贴图
const envMap = new THREE.CubeTextureLoader().load([
  'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png'
]);

// 创建材质
const material = new THREE.MeshStandardMaterial({
  metalness: 0.5, // 范围 0.0（非金属）到 1.0（金属）
  roughness: 0.3, // 范围 0.0（光滑）到 1.0（粗糙）
  metalnessMap: metalnessMap,
  roughnessMap: roughnessMap,
  envMap: envMap
});

// 应用材质到模型
const geometry = new THREE.BoxGeometry();
const mesh = new THREE.Mesh(geometry, material);

// 添加到场景
scene.add(mesh);

通过调整金属度、粗糙度和环境贴图的值，您可以定制材质的外观，创建各种逼真的效果。