Three.js - 材质

Three.js - 材质

如果几何体（Geometry）定义了物体的形状，那么材质（Material）则定义了它的外观。材质控制着物体的颜色、光泽度、透明度以及它对光照的反应。选择合适的材质对于实现所需的视觉风格至关重要，无论是卡通扁平风格还是照片级真实感。

现代PBR材质（标准选择）

基于物理渲染 (PBR) 材质旨在模拟真实世界中光的行为，从而提供更准确、更逼真的效果。它们是大多数现代应用推荐使用的材质。

材质	描述
MeshStandardMaterial	主力PBR材质。仅用两个主要属性即可生成真实感效果： - roughness：表面粗糙度（0 = 完美镜面，1 = 完全漫反射/哑光）。 - metalness：表面金属度（0 = 非金属/电介质，1 = 完全金属）。
MeshPhysicalMaterial	MeshStandardMaterial的扩展，提供高级属性以实现更高的真实感，例如： - clearcoat：模拟薄而透明的涂层（例如，汽车漆面）。 - transmission：模拟光线穿透材质（例如，玻璃、水）。 - sheen：模拟超细纤维表面（例如，织物）。

传统和特殊用途材质

这些材质不如PBR材质真实，但性能可能更高，或者适用于特定的艺术风格和调试用途。

材质	描述
MeshBasicMaterial	最简单的材质。不受光照影响，渲染为纯色或纹理。适用于UI元素、线框或程式化效果。
MeshLambertMaterial	一种不反光、漫反射的材质，会响应光照。计算成本低，但可能看起来扁平。适用于非真实感风格中的哑光表面。
MeshPhongMaterial	用于具有镜面高光（例如塑料）的光泽表面材质。比Lambert材质更具说服力，但不如PBR材质真实，成本也更高。
MeshNormalMaterial	一种调试材质，将对象的法线向量映射到RGB颜色。对于可视化面朝向和调试光照问题非常有用。
MeshDepthMaterial	根据几何体与相机的距离（近 = 白色，远 = 黑色）以灰度渲染。内部用于阴影映射，也可用于雾效等。

使用纹理增强材质

材质在应用纹理时真正变得栩栩如生。TextureLoader 用于加载图像，然后这些图像可以应用于各种材质属性（称为“贴图”）。

• map：主颜色（反照率）纹理。
• normalMap：增加表面细节和凹凸感，而无需增加更多几何体。
• roughnessMap：控制表面粗糙度的灰度纹理。
• metalnessMap：控制表面金属度的灰度纹理。
• aoMap （环境光遮蔽）：增加缝隙中的柔和阴影，增强真实感。

代码示例：使用MeshStandardMaterial

import * as THREE from 'three';

const textureLoader = new THREE.TextureLoader();
const colorTexture = textureLoader.load('/textures/metal_plate_diff_1k.png');
const normalTexture = textureLoader.load('/textures/metal_plate_nor_gl_1k.png');

// Ensure correct color space for textures
colorTexture.colorSpace = THREE.SRGBColorSpace;

const material = new THREE.MeshStandardMaterial({
    map: colorTexture,
    normalMap: normalTexture,
    metalness: 0.7,
    roughness: 0.2
});

const sphere = new THREE.Mesh(
    new THREE.SphereGeometry(1, 64, 64),
    material
);