当前位置：首页 > news >正文

Three.js 实战：使用 PBR 贴图打造真实地面材质

news 2025/7/17 8:45:38

在 Three.js 中，我们可以通过 MeshStandardMaterial 材质配合多张贴图来实现真实的地面效果。这种方式模拟了物理世界中光照与表面材质的复杂交互，常用于构建高质量场景，如数字孪生、建筑可视化、游戏等。

本文将以一个完整示例为基础，详细讲解每一类贴图的作用、用法和注意事项。

什么是 PBR 材质贴图？

PBR（Physically Based Rendering）物理渲染模型支持多种纹理贴图，每种贴图都在模拟真实世界中的一个属性：

贴图类型 Three.js 属性名作用说明
颜色贴图 map 表面基础颜色（必备）
环境遮蔽贴图 aoMap 模拟局部阴影区域（如缝隙）
粗糙度贴图 roughnessMap 控制表面的粗糙程度（影响高光模糊）
法线贴图 normalMap 模拟表面细节凹凸而不改变几何形状
位移贴图 displacementMap 根据灰度值真实改变网格的顶点高度

贴图类型	Three.js 属性名	作用说明
颜色贴图	`map`	表面基础颜色（必备）
环境遮蔽贴图	`aoMap`	模拟局部阴影区域（如缝隙）
粗糙度贴图	`roughnessMap`	控制表面的粗糙程度（影响高光模糊）
法线贴图	`normalMap`	模拟表面细节凹凸而不改变几何形状
位移贴图	`displacementMap`	根据灰度值真实改变网格的顶点高度

加载五种贴图创建地面

// 灯光设置
const ambientLight = new THREE.AmbientLight(0xffffff, 0.3); // 环境光
const directionLight = new THREE.DirectionalLight(0xffffff, 0.5); // 平行光
directionLight.position.set(3, 3, 3);
scene.add(ambientLight, directionLight);// 纹理加载器
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('infinity-10537028.jpg'); // 示例用一张图// 创建地面
const planeGeometry = new THREE.PlaneGeometry(10, 10, 100, 100); // 位移贴图需要较多顶点
const planeMaterial = new THREE.MeshStandardMaterial({map: texture,              // 基础颜色贴图aoMap: texture,            // 环境遮蔽贴图roughnessMap: texture,     // 粗糙度贴图normalMap: texture,        // 法线贴图displacementMap: texture,  // 位移贴图displacementScale: 0.5     // 位移高度控制
});const plane = new THREE.Mesh(planeGeometry, planeMaterial);// 贴图生效关键步骤：设置第二套 UV 给 aoMap 使用
plane.geometry.setAttribute('uv2', new THREE.BufferAttribute(plane.geometry.attributes.uv.array, 2));// 地面旋转使其水平
plane.rotation.x = -Math.PI / 2;
scene.add(plane);

📌 注意事项

1. aoMap 环境遮蔽贴图需要第二套 UV

Three.js 默认只创建一套 UV 坐标（uv），而 aoMap 使用的是 uv2。必须手动复制一份：
plane.geometry.setAttribute('uv2', new THREE.BufferAttribute(plane.geometry.attributes.uv.array, 2));
2. displacementMap 位移贴图要求几何体有更多细分（segments）

否则视觉上无效果，因为顶点太少无法形变：
new THREE.PlaneGeometry(10, 10, 100, 100); // 加细分
3. 所有贴图建议使用专属图（颜色、法线、AO、粗糙、位移各自一张），格式推荐 .jpg 或 .png，尺寸为 2 的幂次（如 512、1024）以便兼容性更好。

可免费获取完整 PBR 贴图集的网站包括：

ambientCG - Free Textures, HDRIs and Models

https://polyhaven.com/textures

ambientCG - Free Textures, HDRIs and Models

搜索关键词如 asphalt, tile, metal, wood 即可获取对应材质的五张贴图。

属性控制什么
map 颜色
roughnessMap 粗糙程度（影响高光）
normalMap 表面细节（比如划痕）
metalnessMap 是否是金属表面
aoMap 缝隙暗影（更立体）
displacementMap 真实变形（起伏）

属性	控制什么
`map`	颜色
`roughnessMap`	粗糙程度（影响高光）
`normalMap`	表面细节（比如划痕）
`metalnessMap`	是否是金属表面
`aoMap`	缝隙暗影（更立体）
`displacementMap`	真实变形（起伏）