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.