1. 创建材质

const textureLoader = new THREE.TextureLoader();
const doorColorTexture = textureLoader.load("/gltf/Default_albedo.jpg")
// 创建几何体
const cubeGeometry = new THREE.BoxBufferGeometry(1,1,1)
// 创建材质
const basicMaterial = new THREE.MeshBasicMaterial({
   color:"#ffff00",
   map:doorColorTexture,
})
cube = new THREE.Mesh(cubeGeometry,basicMaterial);
scene.add(cube)

2.材质偏移&旋转&重复&显示设置

//纹理偏移
doorColorTexture.offset.x = 0.5;
doorColorTexture.offset.y = 0.5;
// 设置旋转的原点
doorColorTexture.center.set(0.5,0.5)
// 纹理旋转--旋转45
doorColorTexture.rotation = Math.PI / 4;
// 纹理重复
doorColorTexture.repeat.set(2,3)
// 设置纹理重复的模式
doorColorTexture.wrapS = THREE.MirroredRepeatWrapping;
doorColorTexture.wrapT = THREE.RepeatWrapping;
// texture纹理显示设置(根据物体大小自动计算贴图的周边的像素点作为填充,类似于PS中的内容识别功能)
doorColorTexture.minFilter = THREE.NearestFilter;
doorColorTexture.magFilter = THREE.NearestFilter;

3. 透明纹理

透明纹理的图片需要为差值图片(黑色部分表示透明,白色部分表示完全不透明)

// 透明纹理
const textureLoader = new THREE.TextureLoader();
const alphaTexture = textureLoader.load("/gltf/Default_emissive.jpg")
// 创建几何体
const cubeGeometry = new THREE.BoxBufferGeometry(1,1,1)
// 创建材质
const basicMaterial = new THREE.MeshBasicMaterial({
   color:"#ffff00",
   map:doorColorTexture,
   alphaMap:alphaTexture, // 透明纹理的贴图
   transparent:true, // 是否允许透明
   opacity:0.3, // 可以控制物体的透明度
 })
 cube = new THREE.Mesh(cubeGeometry,basicMaterial);
 scene.add(cube)

4. 环境遮挡贴图

const textureLoader = new THREE.TextureLoader();
// AO:环境遮挡贴图(使用时需要给物体添加第二组UV)
const doorAOTexture = textureLoader.load("/gltf/Default_AO.jpg");
// 创建几何体
const cubeGeometry = new THREE.BoxGeometry(1,1,1)
console.log("打印物体",cubeGeometry)
// 创建材质
const basicMaterial = new THREE.MeshBasicMaterial({
    color:"#ffff00",
    map:doorColorTexture,
    aoMap:doorAOTexture, // 环境遮挡贴图
})
cube = new THREE.Mesh(cubeGeometry,basicMaterial);
scene.add(cube)
​
// 给物体添加第二组UV
cubeGeometry.setAttribute(
   "uv2",
   new THREE.BufferAttribute(cubeGeometry.attributes.uv.array,2)
)
​