Three.js 材质系统总结笔记

一、金属度 (metalness) 与粗糙度 (roughness)

金属度 (metalness)

范围: 0.0 ~ 1.0
作用: 控制材质的金属外观程度
效果 :
- 0.0: 完全非金属（如塑料、木材、陶瓷）
- 0.5: 半金属效果
- 1.0: 完全金属（如钢铁、铝、铜）
特性 :
- 金属材质会反射环境光
- 高金属度时，漫反射颜色会变暗，反射效果增强

粗糙度 (roughness)

范围: 0.0 ~ 1.0
作用: 控制材质表面的光滑程度
效果 :
- 0.0: 镜面般光滑（高反射，清晰反射）
- 0.5: 中等粗糙（模糊反射）
- 1.0: 完全粗糙（几乎无反射，漫反射为主）
特性 :
- 低粗糙度产生锐利的高光和清晰的反射
- 高粗糙度产生柔和的光泽和模糊的反射

组合效果示例

金属度	粗糙度	效果描述	应用场景
1.0	0.1~0.3	抛光金属	不锈钢、镀铬表面
1.0	0.4~0.6	普通金属	机器零件、工具
1.0	0.7~1.0	锈蚀/磨损金属	旧金属、铸铁
0.0	0.0~0.3	光滑非金属	陶瓷、抛光塑料
0.0	0.4~0.7	普通非金属	木材、普通塑料
0.0	0.8~1.0	粗糙非金属	布料、粗陶

二、环境贴图 (Environment Map)

作用与原理

提供环境反射: 模拟物体对周围环境的反射
增强真实感: 创建材质与环境的互动
补光作用: 提供额外的环境照明

CubeTextureLoader 使用

javascript 复制代码

const textureCube = new THREE.CubeTextureLoader()
    .setPath('/路径/')
    .load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);

配置参数

envMap: 环境贴图纹理
envMapIntensity : 环境贴图强度 (默认1.0)
- 值越大，反射越强
- 建议范围: 0.5~2.0

注意事项

文件命名规范: 六个面按顺序排列
贴图质量: 影响反射效果的真实度
性能考虑: 高分辨率贴图会增加内存占用

三、MeshPhysicalMaterial 高级属性

clearcoat（清漆效果）

作用: 模拟表面涂层效果
clearcoat: 清漆强度 (0.0~1.0)
clearcoatRoughness: 清漆层粗糙度 (0.0~1.0)
应用: 汽车漆、塑料涂层、光油表面

reflectivity（反射率）

作用: 控制材质的反射能力
范围: 0.0~1.0
配合: 通常与envMap一起使用

四、Three.js 主要材质对比

1. MeshBasicMaterial（基础材质）

javascript 复制代码

new THREE.MeshBasicMaterial({
    color: 0xffffff,
    side: THREE.DoubleSide
})

特点: 不受光照影响，恒定颜色
用途: 简单几何体、背景、特效
性能: 最高

2. MeshLambertMaterial（朗伯材质）

javascript 复制代码

new THREE.MeshLambertMaterial({
    color: 0xffffff
})

特点: 对光照有反应，漫反射
用途: 哑光表面、不反光物体
性能: 中等

3. MeshPhongMaterial（冯氏材质）

javascript 复制代码

new THREE.MeshPhongMaterial({
    color: 0xffffff,
    shininess: 30  // 高光强度
})

特点: 支持镜面高光
用途: 塑料、光泽表面
性能: 较低

4. MeshStandardMaterial（标准材质）

javascript 复制代码

new THREE.MeshStandardMaterial({
    color: 0xffffff,
    metalness: 0.5,
    roughness: 0.5
})

特点: 基于物理的渲染(PBR)
用途: 现代渲染，真实感强
性能: 较低

5. MeshPhysicalMaterial（物理材质）

javascript 复制代码

new THREE.MeshPhysicalMaterial({
    color: 0xffffff,
    metalness: 1.0,
    roughness: 0.35,
    clearcoat: 0.5,
    envMap: textureCube
})

特点: MeshStandardMaterial的扩展，更多PBR参数
用途: 高级真实感渲染
性能: 最低（但效果最好）

五、材质选择指南

根据需求选择

需求场景	推荐材质	关键参数
简单展示，不需要光照	MeshBasicMaterial	color, side
哑光表面，需要漫反射	MeshLambertMaterial	color, emissive
光泽塑料，需要高光	MeshPhongMaterial	color, shininess
真实感渲染，PBR流程	MeshStandardMaterial	metalness, roughness
高级金属/清漆效果	MeshPhysicalMaterial	clearcoat, envMap

性能考虑

优先级排序（性能从高到低）:
- MeshBasicMaterial
- MeshLambertMaterial
- MeshPhongMaterial
- MeshStandardMaterial
- MeshPhysicalMaterial
优化建议:
- 简单物体用基础材质
- 复杂场景混合使用不同材质
- 避免所有物体都用物理材质

六、实用技巧

1. 颜色处理

javascript 复制代码

// 保存原始颜色
child.userData.selfColor = new THREE.Color().setHex(
    originalColor.getHex ? originalColor.getHex() : originalColor
);

// 恢复原始颜色
child.material.color.copy(child.userData.selfColor);

2. 材质调试

javascript 复制代码

// 添加GUI控制
const gui = new GUI();
gui.add(material, 'metalness', 0, 1).step(0.01);
gui.add(material, 'roughness', 0, 1).step(0.01);
gui.add(material, 'envMapIntensity', 0, 2).step(0.1);

3. 环境贴图优化

javascript 复制代码

// 预过滤环境贴图（提高性能）
pmremGenerator = new THREE.PMREMGenerator(renderer);
pmremGenerator.compileCubemapShader();

总结要点

金属度+粗糙度是PBR渲染的核心参数
环境贴图显著提升真实感
物理材质适合高质量渲染但消耗性能
根据实际需求平衡效果与性能
合理使用清漆、反射率等高级特性

通过合理组合这些参数，可以创建从简单到高度真实的各类材质效果。