Three.js中为BufferGeometry各面分配不同纹理材质时的异常问题求助

你遇到的这个问题不是Three.js的bug，而是自定义BufferGeometry时的常见疏忽——只有前两个面组（group[0]和group[1]）的顶点配置了UV纹理坐标，其他组的顶点没有对应的UV属性。当你把纹理材质应用到没有UV数据的面组上时，Three.js无法正确映射纹理，就会 fallback 显示材质的color属性，也就是你看到的单一颜色。

问题根源 #

Three.js中，任何依赖纹理的材质（比如MeshBasicMaterial、MeshStandardMaterial）都需要顶点提供UV坐标来确定纹理在面上的映射位置。如果某个面组的顶点没有UV数据，材质会默认使用(0,0)作为所有顶点的UV值，这就导致整个面只显示纹理左上角的单个像素颜色，看起来就像纯色一样。

修复步骤 #

1. 给需要纹理的面组添加UV坐标
   在创建自定义BufferGeometry时，为每个要应用纹理的面的顶点定义UV坐标。比如立方体的每个面，你可以用标准的纹理坐标（[0,0], [1,0], [1,1], [0,1]）来覆盖整个面：

   // 创建UV数组，每个面对应4个顶点（每个顶点2个坐标值）
   const uvData = [];
   // 为6个面分别添加UV坐标
   for (let i = 0; i < 6; i++) {
     uvData.push(0, 0, 1, 0, 1, 1, 0, 1);
   }
   // 将UV数据添加到BufferGeometry
   geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvData, 2));
   

2. 验证groups配置的正确性
   检查你的geometry.addGroup()调用，确保每个组的start和count参数准确对应到包含UV数据的顶点索引范围。比如立方体每个面由两个三角面组成，对应6个索引值，要保证groups的范围和UV数据的覆盖范围匹配。

3. 按需分配材质
   现在你可以自由将纹理材质分配给任意面组了——只要该组对应的顶点在UV数组里有数据，纹理就能正常显示。颜色材质的组即使没有UV数据也不会受影响，因为它们不依赖纹理。

额外说明 #

如果只需要特定几个面用纹理，不需要给所有面都加UV，只要给那些目标面组对应的顶点添加UV坐标即可。比如你只想给第3个面组用纹理，就只给该面的顶点添加UV坐标，其他面可以跳过。

内容的提问来源于stack exchange，提问作者David B