前言

上节我们了解了UV坐标与映射，本节介绍下纹理对象Texture，该对象就是用于设置纹理相关贴图的。

纹理对象

纹理对象是二维图片的集合，它们可以被用来装饰三维模型表面，以此来增加模型的真实感。纹理对象可以是照片、图像、颜色图案等。three中我们利用纹理对象Texture来为模型添加纹理贴图，其构造函数如下：

   Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, colorSpace )

imagee:贴图对象，可以是图片，链接或者Canvas对象。
mapping:UV映射方式，默认为THREE.UVMapping。
wrapS:S水平方向上贴图的处理方式。
wrapT:T垂直方向上贴图的处理方式。
magFilter:放大过滤器，用于确定纹理放大时的过滤方式。
minFilter:缩小过滤器，与放大同理，用于确定缩小时的方式。
format:纹理的像素格式，像素的存储方式。
type:纹理数据的类型，如浮点型、整型等。
anisotropy:表示纹理各向异性的过滤程度。

Texture的部分属性也跟上述参数一样，除此之外还有.clone()拷贝、.dispose()销毁等方法。

纹理转换

我们需要利用TextureLoader去加载纹理贴图，在加载完成后我们可以对其进行陈列、旋转等操作

陈列：利用wrapS与wrapT属性可以设置贴图的陈列映射，把一张贴图变成一个队列。

const textureLoader = new THREE.TextureLoader();
const woodColorTexture = textureLoader.load('./textures/wood.jpg');
woodColorTexture.wrapS = THREE.RepeatWrapping;
woodColorTexture.wrapT = THREE.RepeatWrapping;

偏移：利用offset方法可以对贴图进行偏移操作。

woodColorTexture.offset = new THREE.Vector2(0.1, 0.1);

旋转：利用rotation进行旋转操作。

// 设置旋转角度
woodColorTexture.rotation = Math.PI/3;
// 设置旋转中心，默认(0,0)
woodColorTexture.center.set(0.5,0.5);

下面我们可以写一个小案例，创建一个立方体，把立方体材质贴上木头图片。首先我们找一张木头图片，然后创建textures文件夹将图片放到里面： T89_B2MOSV_I@QHGT.png

然后就用纹理加载器加载进来，将其添加到材质里面即可。

   //加载纹理贴图
const textureLoader = new THREE.TextureLoader();
const woodColorTexture = textureLoader.load('./textures/wood.jpg');
const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({
  color: '#ffff00',
  map: woodColorTexture
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

QQ图片20230427220232.png

总结

以上就是纹理对象的用法及加载简单加载纹理贴图的方法，纹理贴图能够让几何体从朴素变成华丽，就像css一样还是很好玩的。

three学习（二十）——纹理对象

前言

纹理对象

纹理转换

总结