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 案例中心

相关推荐
CodeSheep3 分钟前
小米汽车这薪资是认真的吗?
前端·后端·程序员
白白李媛媛8 分钟前
上传Vue3+vite+Ts组件到npm官方库保姆级教程
前端·arcgis·npm
晴殇i17 分钟前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css
程序猿阿伟21 分钟前
《声音的变形记:Web Audio API的实时特效法则》
开发语言·前端·php
凌览24 分钟前
有了 25k Star 的MediaCrawler爬虫库加持,三分钟搞定某红书、某音等平台爬取!
前端·后端·python
万少26 分钟前
2-自然壁纸实战教程-AGC 新建项目
前端·harmonyos
满分观察网友z38 分钟前
别小看这个滑动条!从性能灾难到用户挚爱的 uni-app Slider 踩坑实录
前端
满分观察网友z41 分钟前
别再裸写<textarea>了!一个“小”功能,我用上了它几乎所有API
前端
西西木科技丨Shopify开发机构1 小时前
如何在 Shopify 中建立重定向
前端·html
汪子熙1 小时前
深入探析 header facets:定位与应用
前端·javascript