three.js中设置纹理,通常先通过new THREE.TextureLoader().load()
方法先加载纹理图片,然后使用material的map属性来设置纹理,但是通过BufferGeometry
来创建的几何体通过这种方式来设置纹理是不起作用的,需要我们手动指定uv
。
下面是一个正六边形指定纹理,六边形分成4个三角形,需要指定4次
let uvs = new Float32Array([
0.25, 0.0,
0.0, 0.5,
0.25, 1.0,
// 0.25, 0.0,
0.25, 0.0,
0.25, 1.0,
0.75, 1.0,
// 0.25, 0.0,
0.25, 0.0,
0.75, 1.0,
1.0, 0.5,
// 0.25, 0.0,
0.25, 0.0,
1.0, 0.5,
0.75, 0.0,
// 0.25, 0.0,
])
然后
geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));