ThreeJS关于Textures概述----(10)

54 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 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属性设置上就可以实现(下图为我的实现效果,正方体和球体);

2022-08-11 170848.gif 2022-08-11 164300.gif

什么是UV?

根据效果图我map 贴图并不是随机的,他的图片在模型上的渲染时遵循一定的规律,他是采用UV坐标,U和V分别是图片在显示器水平、垂直方向上的坐标,取值一般都是0~1,通过UV坐标系我们可以定位图像上的任意一个像素;

image.png

图片来自《Threejs开发指南》第十章

textureLoader.load()方法参数详解

如下图中灰色的提示文本所示,.load方法中提供了多个回调函数,onload加载完成,onProgress进程中,onError报错了,我们可以根据所需合理使用回调;

image.png

如果有哪里描述不准确或者有问题,欢迎大佬指正!
(≖ᴗ≖)✧