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

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

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

什么是 PBR 材质贴图?

PBR(Physically Based Rendering)物理渲染模型支持多种纹理贴图,每种贴图都在模拟真实世界中的一个属性:

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

加载五种贴图创建地面

javascript 复制代码
// 灯光设置
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。必须手动复制一份:

javascript 复制代码
plane.geometry.setAttribute('uv2', new THREE.BufferAttribute(plane.geometry.attributes.uv.array, 2));

2. displacementMap 位移贴图要求几何体有更多细分(segments)

否则视觉上无效果,因为顶点太少无法形变:

复制代码
javascript 复制代码
new THREE.PlaneGeometry(10, 10, 100, 100); // 加细分

3. 所有贴图建议使用专属图(颜色、法线、AO、粗糙、位移各自一张),格式推荐 .jpg.png,尺寸为 2 的幂次(如 512、1024)以便兼容性更好。

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

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

属性 控制什么
map 颜色
roughnessMap 粗糙程度(影响高光)
normalMap 表面细节(比如划痕)
metalnessMap 是否是金属表面
aoMap 缝隙暗影(更立体)
displacementMap 真实变形(起伏)
相关推荐
Min;2 天前
cesium-kit:让 Cesium 开发像写 UI 组件一样简单
javascript·vscode·计算机视觉·3d·几何学·贴图
航Hang*2 天前
Kurt-Blender零基础教程:第3章:材质篇——第3节:给模型上材质
笔记·blender·材质
航Hang*2 天前
Kurt-Blender零基础教程:第3章:材质篇——第2节:凹凸感和置换形变;混合材质节点和NodeWrangler的五大用法;简单的UV纹理绘制
笔记·blender·材质·建模·uv
云卓SKYDROID3 天前
无人机航电系统散热技术要点
人工智能·无人机·材质·高科技·云卓科技
机器人行业研究员4 天前
六维力传感器材质选择:影响性能与精度的关键因素
材质
航Hang*4 天前
Kurt-Blender零基础教程:第3章:材质篇——第1节:材质基础~原理化BSDF,添加有纹理材质与用蒙版做纹理叠加
笔记·blender·材质·建模
云卓SKYDROID5 天前
无人机无线电测距模块技术要点与难点
无人机·材质·遥控器·高科技·云卓科技
Duo1J5 天前
【OpenGL】LearnOpenGL学习笔记25 - 法线贴图 NormalMap
笔记·学习·图形渲染·贴图·着色器
Duo1J5 天前
【OpenGL】LearnOpenGL学习笔记26 - 视差贴图 Parallax Map
笔记·学习·图形渲染·贴图·着色器
da_vinci_x5 天前
游戏UI告别“贴图”时代:用Adobe XD构建“活”的设计系统
游戏·ui·材质·贴图·游戏策划·游戏美术·pbr