Three.js-硬要自学系列12 (各种贴图的综合应用)

关于模型贴图，我觉得有必要拿出来单独练习巩固下

基础贴图（Diffuse Map）

作用：给模型「穿衣服」，定义表面颜色和图案。比如给木箱贴上木板纹理

js 复制代码

const texture = new THREE.TextureLoader().load('木板.jpg');
const material = new THREE.MeshBasicMaterial({ map: texture });

凹凸贴图（Bump Map）

作用：用黑白图模拟表面凹凸，像浮雕一样。白色凸起，黑色凹陷，适合低成本立体感（如岩石表面）

js 复制代码

const bumpTexture = new THREE.TextureLoader().load('凹凸图.jpg');
material.bumpMap = bumpTexture;
material.bumpScale = 0.1; // 控制凹凸强度

法线贴图（Normal Map）

作用：用 RGB 颜色模拟更真实的凹凸（如游戏角色皮肤），比凹凸贴图更细腻

js 复制代码

const normalTexture = new THREE.TextureLoader().load('法线图.jpg');
material.normalMap = normalTexture;

高光贴图（Specular Map）

作用：控制哪里反光更强（如湿润路面）。白色区域高光明显，黑色区域无高光

js 复制代码

const specularTexture = new THREE.TextureLoader().load('高光图.jpg');
material.specularMap = specularTexture;

透明贴图（Alpha Map）

作用：用黑白图控制透明度，比如树叶（黑色透明，白色不透明）

js 复制代码

const alphaTexture = new THREE.TextureLoader().load('透明图.jpg'); 
material.transparent = true;
material.alphaMap = alphaTexture;

金属度与粗糙度贴图（Metalness/Roughness Map）

作用：金属度贴图决定哪里像金属（白色金属感），粗糙度贴图控制表面光滑度（白色粗糙，黑色光滑）

js 复制代码

material.metalnessMap = metalTexture; // 金属感区域
material.roughnessMap = roughTexture; // 粗糙度区域

环境贴图（Environment Map）

作用：模拟物体反射周围环境（如镜子或金属球），需 6 张图组成立方体贴图

js 复制代码

const envMap = new THREE.CubeTextureLoader().load(['px.jpg', 'nx.jpg', ...]); 
material.envMap = envMap;

位移贴图（Displacement Map）

作用：直接改变模型形状（如真实的山脉起伏），但性能消耗大

js 复制代码

material.displacementMap = heightTexture; 
material.displacementScale = 0.5; // 形变强度

发射贴图（Emissive Map）

作用：让模型自发光（如霓虹灯），不受场景光照影响

js 复制代码

material.emissiveMap = glowTexture;
material.emissiveIntensity = 2; // 发光强度

光照贴图（Light Map）

作用：预烘焙阴影，适合静态场景优化性能

js 复制代码

const lightMapTexture = new THREE.TextureLoader().load('lightmap.jpg');
const material = new THREE.MeshStandardMaterial({ 
    map: baseColorTexture, // 基础颜色贴图 
    lightMap: lightMapTexture // 光照贴图 
});

遮挡贴图（AO Map）

作用：模拟光线遮挡效果，增强模型立体感

js 复制代码

const aoTexture = new THREE.TextureLoader().load('ao_map.jpg');
const material = new THREE.MeshStandardMaterial({
    aoMap: aoTexture, // 绑定遮挡贴图 
    aoMapIntensity: 0.8 // 遮挡强度（0-1，默认1） 
});

视频贴图（Video Texture）

将视频投射到模型表面（如电视屏幕）

js 复制代码

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 });

贴图选择参考

贴图类型	用途	性能消耗	常用场景
基础贴图	表面颜色/图案	低	所有模型
法线贴图	细腻凹凸效果	中	游戏角色、复杂材质
环境贴图	反射周围环境	高	金属/玻璃材质
位移贴图	真实形变	极高	地形、高精度模型
透明贴图	局部透明	低	树叶、镂空物体

下面是一个使用案例

以上案例均可在案例中心查看体验

THREE 案例中心