Three.js如何设置metalness、roughness实现镜面与钢铁材质效果

核心参数基础定义 #

• metalness（金属度）：取值范围0-1，控制材质的金属属性。值越高漫反射表现越弱，反射环境的能力越强，0为完全非金属，1为纯金属。
• roughness（粗糙度）：取值范围0-1，控制材质表面的光滑程度。值越低表面越光滑，反射的影像越清晰，0为完全光滑无粗糙质感，1为完全漫反射无清晰反射。

镜面材质与钢铁材质的参数差异 #

镜面材质 #

核心需求是完全清晰的场景/环境反射，几乎无漫反射表现
参数设置：

• metalness：1.0，高金属度保证反射强度
• roughness：0.0，完全无粗糙质感保证反射影像绝对清晰

钢铁金属材质 #

核心需求是带有轻微表面划痕/磨砂质感的金属反射，不会像镜面一样完全清晰
参数设置：

• metalness：0.8~1.0，钢铁属于金属类材质，金属度接近拉满即可
• roughness：0.15~0.4，可根据钢铁状态调整：全新抛光钢可以低到0.1，磨砂/生锈钢可以调到0.4

具体实现代码示例 #

1. 镜面材质实现 #

如果需要真实的实时反射效果，可搭配立方相机捕捉场景内容作为环境贴图，代码如下：

// 初始化立方相机，用于实时生成场景反射贴图
const cubeRenderTarget = new THREE.WebGLCubeRenderTarget(1024);
const cubeCamera = new THREE.CubeCamera(0.1, 1000, cubeRenderTarget);
scene.add(cubeCamera);

// 镜面材质配置
const mirrorMaterial = new THREE.MeshStandardMaterial({
  metalness: 1.0,
  roughness: 0.0,
  envMap: cubeRenderTarget.texture, // 绑定实时反射的立方体贴图
  // 不需要实时反射的场景也可以直接替换为预加载的HDR环境贴图
});

// 渲染循环内更新反射内容
function render() {
  mirrorMesh.visible = false; // 渲染反射时隐藏镜面本身避免自映射
  cubeCamera.update(renderer, scene);
  mirrorMesh.visible = true;
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}

效果参考：

2. 钢铁金属材质实现 #

可以搭配纹理贴图实现更真实的划痕、磨损效果，纯参数实现也可以直接使用基础配置：

// 纹理贴图加载为可选配置，不需要可以删除对应参数
const textureLoader = new THREE.TextureLoader();
const roughnessMap = textureLoader.load('path/to/steel_roughness.jpg');
const metalnessMap = textureLoader.load('path/to/steel_metalness.jpg');
const normalMap = textureLoader.load('path/to/steel_normal.jpg'); // 模拟表面凹凸划痕

const steelMaterial = new THREE.MeshStandardMaterial({
  color: 0x777777, // 钢铁基础灰度
  metalness: 0.9,
  roughness: 0.25,
  roughnessMap: roughnessMap,
  metalnessMap: metalnessMap,
  normalMap: normalMap,
  envMap: envMapTexture, // 绑定HDR环境贴图可以大幅提升真实感
});

效果参考：

内容的提问来源于stack exchange，提问作者user16434953