由于各版本threejs贴图的方式可能不太一样,所以研究了一下0.143.0版本是如何通过设置uv坐标来贴图的,上代码。
const geometry = new THREE.BoxGeometry(1, 1, 1)
// 各个面uv坐标
const areaRight = [0, 1, 0.5, 1, 0, 0.666, 0.5, 0.666]
const areaLeft = [0.5, 1, 1, 1, 0.5, 0.666, 1, 0.666]
const areaTop = [0, 0.666, 0.5, 0.666, 0, 0.333, 0.5, 0.333]
const areaBottom = [0.5, 0.666, 1, 0.666, 0.5, 0.333, 1, 0.333]
const areaFront = [0, 0.333, 0.5, 0.333, 0, 0, 0.5, 0]
const areaBack = [0.5, 0.333, 1, 0.333, 0.5, 0, 1, 0]
// 创建整个物体贴图的uv数组
const uv = new Float32Array([
...areaRight,
...areaLeft,
...areaTop,
...areaBottom,
...areaFront,
...areaBack,
])
// 设置geometry的uv属性的值,2个为一组
geometry.setAttribute('uv', new THREE.BufferAttribute(uv, 2))
const textureLoad = new THREE.TextureLoa