three.js物体纹理及其常用属性介绍

一、Three中的纹理和材质介绍

THREE中的纹理和材质是用来渲染3D场景中的物体表面的。纹理贴图定义物体表面的颜色和外观，而材质则定义物体表面如何反射光线。

• 纹理可以使用多种类型的图像文件，包括JPEG、PNG、GIF等。纹理可以是简单的颜色、图案或者是复杂的图像。

• 材质是指物体表面材料的特性。在THREE中，材质可以定义物体表面的颜色、质地、透明度等属性。材质可以使用多种类型的渲染器，包括基本的Phong（光泽）、Lambert（哑光）和Basic渲染器。此外，高级材质如PBR（物理渲染）材质还可以模拟真实的光学特性，包括表面反射、漫反射和透明度等。

总的来说，THREE中的纹理和材质是用来定义物体表面属性，使3D场景更加真实、逼真的关键部分。

二、自定义立方体纹理

效果如图：

核心代码：

// 导入纹理
const textureLoader = new THREE.TextureLoader();
const doorColorTexture = textureLoader.load("./textures/door/height.jpg");
// 添加物体
const cubeGeometry = new THREE.BoxBufferGeometry(1, 1, 1);
// 材质
const basicMaterial = new THREE.MeshBasicMaterial({
  map: doorColorTexture,
});
// 创建物体
const cube = new THREE.Mesh(cubeGeometry, basicMaterial);
// 将物体添加到场景
scene.add(cube);

三、纹理常用属性介绍

1. 偏移量offset

// 设置纹理偏移
// doorColorTexture.offset.x = 0.5; // 沿着x轴偏移50%
// doorColorTexture.offset.y = 0.5; // 沿着y轴偏移50%
doorColorTexture.offset.set(0.5, 0.5); // 0.5表示偏移50%

2. 旋转rotation

// 设置旋转中心
doorColorTexture.center.set(0.5, 0.5); 

// 设置纹理旋转
doorColorTexture.rotation = Math.PI / 4;  // 45度

3. 重复repeat

// 设置纹理重复
doorColorTexture.repeat.set(3, 4) // 沿着x轴重复3次
// 设置纹理重复模式 MirroredRepeatWrapping 镜像重复
doorColorTexture.wrapS = THREE.RepeatWrapping; // 沿着x轴重复
doorColorTexture.wrapT = THREE.RepeatWrapping; // 沿着y轴重复

4. 纹理显示算法

// 导入纹理
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load("./textures/minecraft.png");
// 添加物体
const cubeGeometry = new THREE.BoxBufferGeometry(1, 1, 1);
// 材质
const basicMaterial = new THREE.MeshBasicMaterial({
  map: texture,
});
const cube = new THREE.Mesh(cubeGeometry, basicMaterial);
scene.add(cube);

在这里我们换个纹理贴图，当我们放大时：

可以看到图像模糊了，这样的用户体验是很不好的，有没有什么办法解决呢？

这就是设置其的显示方式，默认是LinearFilter线性显示，我们改成NearestFilter就可以了

// texture纹理显示设置
texture.minFilter = THREE.NearestFilter;
texture.magFilter = THREE.NearestFilter;
// texture.minFilter = THREE.LinearFilter;
// texture.magFilter = THREE.LinearFilter;

设置完成之后，我们在放大看看

即使放到很大还是很清晰

THREE.NearestFilter介绍

THREE.NearestFilter是three.js中的一种纹理显示模式，也称为最近邻过滤。

在此模式下，网格表面的纹理像素直接对应到屏幕像素，像素之间没有任何插值，因此图像会出现锯齿状的效果。这种模式适用于一些低分辨率的像素风格游戏或像素艺术，可以增强游戏的复古感或像素艺术的细节表现。

可以通过以下方式来设置THREE.NearestFilter：

texture.magFilter = THREE.NearestFilter;
texture.minFilter = THREE.NearestFilter;

其中

• magFilter表示纹理的放大过滤方式，
• minFilter表示缩小过滤方式。

我们在设置过程中，将这两个过滤模式都设置为THREE.NearestFilter即可将整个纹理的显示模式都改为最近邻过滤。

5. 透明纹理

我们还是以最开始的门的纹理为例，要设置门的透明，我们需要准备一张和门这个纹理图片切合的黑白图片，黑色代表不显示，白色代表完全显示

这时我们没有设置透明之前的样子

// 导入纹理
const textureLoader = new THREE.TextureLoader();
const doorColorTexture = textureLoader.load("./textures/door/height.jpg");

// 添加物体
const cubeGeometry = new THREE.BoxBufferGeometry(1, 1, 1);
// 材质
const basicMaterial = new THREE.MeshBasicMaterial({
  map: doorColorTexture,
});
const cube = new THREE.Mesh(cubeGeometry, basicMaterial);
scene.add(cube);

我现在的需求是只保留门，其他黑色的边框完全透明，

代码如下：

// 导入纹理
const textureLoader = new THREE.TextureLoader();
const doorColorTexture = textureLoader.load("./textures/door/height.jpg");
// 添加透明背景纹理
const doorAplhaTexture = textureLoader.load("./textures/door/alpha.jpg");

// 添加物体
const cubeGeometry = new THREE.BoxBufferGeometry(1, 1, 1);
// 材质
const basicMaterial = new THREE.MeshBasicMaterial({
  map: doorColorTexture,
  alphaMap: doorAplhaTexture, // 设置透明
  transparent: true, // 允许透明
});
const cube = new THREE.Mesh(cubeGeometry, basicMaterial);
scene.add(cube);

6. 环境遮挡贴图aoMap和强度aoMapIntensity

这是我们上面设置了透明度的门，可看上去并不立体，感觉就是一个平面图，没有那种3d的真实的门的感觉

想要让门有真实的感觉我们需要设置纹理贴图的遮挡和强度，我们先准备一张遮挡图片如下：

然后我们在设置遮挡和强度

// 导入纹理
const textureLoader = new THREE.TextureLoader();
const doorColorTexture = textureLoader.load("./textures/door/height.jpg");
const doorAplhaTexture = textureLoader.load("./textures/door/alpha.jpg");
// 定义遮挡贴图
const doorAoTexture = textureLoader.load(
  "./textures/door/ambientOcclusion.jpg"
);

// 添加物体
const cubeGeometry = new THREE.BoxBufferGeometry(1, 1, 1);
// 材质
const basicMaterial = new THREE.MeshBasicMaterial({
  map: doorColorTexture,
  alphaMap: doorAplhaTexture,
  transparent: true,
  aoMap: doorAoTexture, // 遮挡贴图
  aoMapIntensity: 1, // 强度1为最强，0最小
  // opacity: 0.3,
  //   side: THREE.DoubleSide,
});
basicMaterial.side = THREE.DoubleSide;
const cube = new THREE.Mesh(cubeGeometry, basicMaterial);
scene.add(cube);
// 给cube添加第二组uv
cubeGeometry.setAttribute(
  "uv2",
  new THREE.BufferAttribute(cubeGeometry.attributes.uv.array, 2)
);

效果如图：

如上图是设置了遮挡和强调之后的门，看上去是不是更加真实了呢。

好啦以上就是关于three.js物体的纹理new THREE.TextureLoader()及其常用属性的介绍啦