携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第12天,点击查看活动详情 >
当我们需要我们的模型变得更加漂亮生动时,我们需要为我们的模型添加纹理;
什么是Textures?
Textures都基于图像,这些图像会覆盖在几何图形的表面,他就像物体的皮肤,决定了几何体的外表;皮肤定义了一个几何体看起来是否像金属,透明与否;
加载解析
这个一个简单的道理分析,实际场景中都使用textureLoader更加方便高效;
// 创建一张空的图片
let image = new Image();
// 创建纹理,使用图片
let texture = new THREE.Texture(image)
// 设置图片的路径
image.src = '/img/header.jpg'
// 图片加载完成回调
image.onload = ()=>{
// 当图片加载完成时,纹理更新
texture.needsUpdate = true;
}
使用TextureLoader实现纹理贴图
// 实例化textureLoader
// 一个textureLoader可以加载多张图片,没必要每次重复声明
const textureLoader = new THREE.TextureLoader()
// 加载图片创建纹理
let texture2 = textureLoader.load('/img/header.jpg')
两种方式最终拿到的纹理都可以直接在material中将map属性设置上就可以实现(下图为我的实现效果,正方体和球体);
什么是UV?
根据效果图我map 贴图并不是随机的,他的图片在模型上的渲染时遵循一定的规律,他是采用UV坐标,U和V分别是图片在显示器水平、垂直方向上的坐标,取值一般都是0~1,通过UV坐标系我们可以定位图像上的任意一个像素;
图片来自《Threejs开发指南》第十章
textureLoader.load()方法参数详解
如下图中灰色的提示文本所示,.load方法中提供了多个回调函数,onload加载完成,onProgress进程中,onError报错了,我们可以根据所需合理使用回调;
如果有哪里描述不准确或者有问题,欢迎大佬指正!
(≖ᴗ≖)✧