https://www.bilibili.com/video/BV1hD4y1h7pi?t=0.7
【使用 Three.js 实现的效果】
一、纹理和材质
纹理：简单来说就是给我们创建好的实体填上一层好看的皮囊。
首先我们要导入纹理 THREE.TextureLoader()
之后我们给纹理附上我们想要的图片（纹理图片很容易百度到）
我们来创建物体 new THREE.BoxBufferGeometry()
导入材质，给 map 赋值为我们的纹理 （map —> 颜色贴图）
之后结合我们的物体和材质，添加到场景中即可
关键代码：
// 导入纹理 const textureLoader = new THREE.TextureLoader() // 纹理加载器 添加纹理图片 const doorColorTexture = textureLoader.load('./textures/doors.png') // 添加物体 const cubeGeometry = new THREE.BoxBufferGeometry(1, 1, 1) // 材质 const basicMaterial = new THREE.MeshBasicMaterial({ // map 为颜色贴图 map: doorColorTexture }) // 结合物体和材质 const cube = new THREE.Mesh(cubeGeometry, basicMaterial) // 场景中添加物体 scene.add(cube)
此处的纹理是这样的（随便百度到的）：
渲染后的效果：
二、纹理常用属性
1、偏移属性
.offset 偏移属性：即让纹理贴图在物体上做偏移
// 设置偏移（范围0-1） doorColorTexture.offset.set(0.5, 0.5, 0)
2、旋转属性
.rotation 纹理将围绕中心点旋转多少度，单位为弧度（rad），正值为逆时针旋转，默认值问为 0
// 设置旋转 30°（以 Math.PI 180° 为基准） doorColorTexture.rotation = Math.PI / 6
3、旋转中心点
.center 旋转中心点 (0.5, 0.5) 对应纹理的中心，默认为 (0, 0)
// 设置旋转中心点 (0.5, 0.5) 对应纹理的中心，默认为 (0, 0) doorColorTexture.center.set(0.5, 0.5)
4、纹理的重复
.repeat 让纹理在物体上重复
// 设置纹理的重复（x 轴方向重复2次，y 轴方向重复3次） doorColorTexture.repeat.set(2, 3) // 设置纹理重复的模式（重复到无穷大） doorColorTexture.wrapS = THREE.MirroredRepeatWrapping doorColorTexture.wrapT = THREE.RepeatWrapping
三、透明纹理
1、添加透明纹理
.alphaMap: Texture
alpha 贴图是一张灰色纹理，用于控制整个表面的不透明度（黑色：完全透明；白色：完全不透明）。默认值为 null。
我们在一个面一个门的基础上，添加透明纹理，透明纹理图片如下：
我们首先使用纹理加载器把透明纹理添加进来，之后再在基础材质中添加，注意还要设置透明属性
// 导入纹理 const textureLoader = new THREE.TextureLoader() // 纹理加载器 添加纹理图片 const doorColorTexture = textureLoader.load('./textures/doors.png') // 纹理加载器 添加透明纹理 const doorAplhaTexure = textureLoader.load('./textures/bwbk.png') // 添加物体 const cubeGeometry = new THREE.BoxBufferGeometry(1, 1, 1) // 材质 const basicMaterial = new THREE.MeshBasicMaterial({ // map 为颜色贴图 map: doorColorTexture, // alphaMap 为透明纹理 alphaMap: doorAplhaTexure, // 设置透明属性 transparent: true }) // 结合物体和材质 const cube = new THREE.Mesh(cubeGeometry, basicMaterial) // 场景中添加物体 scene.add(cube)
2、添加平面（渲染前面）
我们在网格中添加一个二维平面，设置为基础材质。注意设置一定的距离。
// 添加平面 const plane = new THREE.Mesh( new THREE.PlaneBufferGeometry(1, 1), basicMaterial ) // 设置一定的距离 plane.position.set(3, 0, 0)
3、平面两面 / 背面渲染
当我们想渲染两面或者只渲染背面的时候，我们只需要设置一个 side 属性即可
const basicMaterial = new THREE.MeshBasicMaterial({ // map 为颜色贴图 map: doorColorTexture, // alphaMap 为透明纹理 alphaMap: doorAplhaTexure, transparent: true, // 渲染两面 side: THREE.DoubleSide // 渲染背面 // side: THREE.BackSide })
四、环境遮挡贴图与强度
.aoMap 该纹理的红色通道用作环境遮挡贴图。默认值为 null。aoMap 需要第二组 UV。
【UV：纹理坐标通常具有U和V两个坐标轴，因此称之为UV坐标。U代表横向坐标上的分布、V代表纵向坐标上的分布。】
在此我们做一个演示，即实现我们给下面第一张图片添加上第二张图片的观感强度，从而实现第三四张图片的效果（立体逼真感）
完整代码和图片资源可以通过下方方式加入进来自行获取：
在这里，我们要使用 aoMap，注意此属性需要第二组 UV，所以我们需要使用自定义属性手动添加第二组 UV，参考代码如下：
// 导入纹理 const textureLoader = new THREE.TextureLoader() // 纹理加载器 添加纹理图片 const doorColorTexture = textureLoader.load('./textures/doors.png') // 纹理加载器 添加透明纹理 const doorAplhaTexure = textureLoader.load('./textures/bwbk.png') // 纹理加载器 添加增强视觉效果的图片 const doorAoTexture = textureLoader.load('./textures/demo.png') // 添加物体 const cubeGeometry = new THREE.BoxBufferGeometry(1, 1, 1) // 材质 const basicMaterial = new THREE.MeshBasicMaterial({ // map 为颜色贴图 map: doorColorTexture, // alphaMap 为透明纹理 alphaMap: doorAplhaTexure, transparent: true, aoMap: doorAoTexture }) // 结合物体和材质 const cube = new THREE.Mesh(cubeGeometry, basicMaterial) // 场景中添加物体 scene.add(cube) // 给 cube 添加第二组 UV cubeGeometry.setAttribute('uv2', new THREE.BufferAttribute(cubeGeometry.attributes.uv.array, 2)) // 添加平面 const planeGeometry = new THREE.PlaneBufferGeometry(1, 1) const plane = new THREE.Mesh(planeGeometry, basicMaterial) // 自带一组 UV（Object-geometry-attributes-uv） console.log(plane) // 设置一定的距离 plane.position.set(3, 0, 0) // 添加到场景中 scene.add(plane) // 给平面设置第二组 UV planeGeometry.setAttribute('uv2', new THREE.BufferAttribute(planeGeometry.attributes.uv.array, 2))
五、写在最后（附源码和图片资源）
这篇文章看完是不是又收获满满呢，接下来进行一下实操练习吧。
相关资源可以通过下面方式加入进来，自行获取。
