在 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
环境遮蔽贴图需要第二套 UVThree.js 默认只创建一套 UV 坐标(
uv
),而aoMap
使用的是uv2
。必须手动复制一份:
javascriptplane.geometry.setAttribute('uv2', new THREE.BufferAttribute(plane.geometry.attributes.uv.array, 2));
2.
displacementMap
位移贴图要求几何体有更多细分(segments)否则视觉上无效果,因为顶点太少无法形变:
javascriptnew THREE.PlaneGeometry(10, 10, 100, 100); // 加细分
3. 所有贴图建议使用专属图(颜色、法线、AO、粗糙、位移各自一张),格式推荐
.jpg
或.png
,尺寸为 2 的幂次(如 512、1024)以便兼容性更好。可免费获取完整 PBR 贴图集的网站包括:
搜索关键词如
asphalt
,tile
,metal
,wood
即可获取对应材质的五张贴图。
属性 控制什么 map
颜色 roughnessMap
粗糙程度(影响高光) normalMap
表面细节(比如划痕) metalnessMap
是否是金属表面 aoMap
缝隙暗影(更立体) displacementMap
真实变形(起伏)
Three.js 实战:使用 PBR 贴图打造真实地面材质
bug总结2025-07-20 12:08
相关推荐
二川bro3 天前
第21节:环境贴图与PBR材质升级——构建电影级真实感渲染AndrewHZ4 天前
【三维渲染技术讨论】Blender输出的三维文件里的透明贴图在Isaac Sim里会丢失, 是什么原因?Thomas_YXQ11 天前
Unity3D编辑器扩展-物体批量替换设置材质CG_MAGIC14 天前
主流 3D 模型格式(FBX/OBJ/DAE/GLTF)材质支持与转换操作指南郝学胜-神的一滴15 天前
Three.js 材质系统深度解析渲吧-云渲染19 天前
3ds MAX文件/贴图名称乱码?6大根源及解决方案渲吧-云渲染21 天前
破译真实感:渲染参数进阶指南——告别塑料感,唤醒材质生命力ue星空23 天前
UE材质World Position 和 Object Positionzxc2446039341 个月前
gpu instancer crowd 使用自定义材质并且只修改单个物体的材质参数CG_MAGIC1 个月前
3D 建模核心术语扫盲:拓扑、UV 展开、烘焙与 AO 贴图解析