关于模型贴图，我觉得有必要拿出来单独练习巩固下
基础贴图（Diffuse Map）
作用：给模型「穿衣服」，定义表面颜色和图案。比如给木箱贴上木板纹理
const texture = new THREE.TextureLoader().load('木板.jpg');
const material = new THREE.MeshBasicMaterial({ map: texture });
凹凸贴图（Bump Map）
作用：用黑白图模拟表面凹凸，像浮雕一样。白色凸起，黑色凹陷，适合低成本立体感（如岩石表面）
const bumpTexture = new THREE.TextureLoader().load('凹凸图.jpg');
material.bumpMap = bumpTexture;
material.bumpScale = 0.1; // 控制凹凸强度
法线贴图（Normal Map）
作用：用 RGB 颜色模拟更真实的凹凸（如游戏角色皮肤），比凹凸贴图更细腻
const normalTexture = new THREE.TextureLoader().load('法线图.jpg');
material.normalMap = normalTexture;
高光贴图（Specular Map）
作用：控制哪里反光更强（如湿润路面）。白色区域高光明显，黑色区域无高光
const specularTexture = new THREE.TextureLoader().load('高光图.jpg');
material.specularMap = specularTexture;
透明贴图（Alpha Map）
作用：用黑白图控制透明度，比如树叶（黑色透明，白色不透明）
const alphaTexture = new THREE.TextureLoader().load('透明图.jpg');
material.transparent = true;
material.alphaMap = alphaTexture;
金属度与粗糙度贴图（Metalness/Roughness Map）
作用：金属度贴图决定哪里像金属（白色金属感），粗糙度贴图控制表面光滑度（白色粗糙，黑色光滑）
material.metalnessMap = metalTexture; // 金属感区域
material.roughnessMap = roughTexture; // 粗糙度区域
环境贴图（Environment Map）
作用：模拟物体反射周围环境（如镜子或金属球），需 6 张图组成立方体贴图
const envMap = new THREE.CubeTextureLoader().load(['px.jpg', 'nx.jpg', ...]);
material.envMap = envMap;
位移贴图（Displacement Map）
作用：直接改变模型形状（如真实的山脉起伏），但性能消耗大
material.displacementMap = heightTexture;
material.displacementScale = 0.5; // 形变强度
发射贴图（Emissive Map）
作用：让模型自发光（如霓虹灯），不受场景光照影响
material.emissiveMap = glowTexture;
material.emissiveIntensity = 2; // 发光强度
光照贴图（Light Map）
作用：预烘焙阴影，适合静态场景优化性能
const lightMapTexture = new THREE.TextureLoader().load('lightmap.jpg');
const material = new THREE.MeshStandardMaterial({
map: baseColorTexture, // 基础颜色贴图
lightMap: lightMapTexture // 光照贴图
});
遮挡贴图（AO Map）
作用：模拟光线遮挡效果，增强模型立体感
const aoTexture = new THREE.TextureLoader().load('ao_map.jpg');
const material = new THREE.MeshStandardMaterial({
aoMap: aoTexture, // 绑定遮挡贴图
aoMapIntensity: 0.8 // 遮挡强度（0-1，默认1）
});
视频贴图（Video Texture）
将视频投射到模型表面（如电视屏幕）
const video = document.createElement('video');
video.src = 'video.mp4';
video.autoplay = true; // 自动播放
video.muted = true; // 静音（部分浏览器要求静音才能自动播放）
video.loop = true; // 循环播放
const texture = new THREE.VideoTexture(video);
texture.minFilter = THREE.LinearFilter; // 避免视频模糊
const material = new THREE.MeshBasicMaterial({ map: texture });
贴图选择参考
| 贴图类型 | 用途 | 性能消耗 | 常用场景 |
|---|---|---|---|
| 基础贴图 | 表面颜色/图案 | 低 | 所有模型 |
| 法线贴图 | 细腻凹凸效果 | 中 | 游戏角色、复杂材质 |
| 环境贴图 | 反射周围环境 | 高 | 金属/玻璃材质 |
| 位移贴图 | 真实形变 | 极高 | 地形、高精度模型 |
| 透明贴图 | 局部透明 | 低 | 树叶、镂空物体 |
下面是一个使用案例
