Three.js如何为带索引的BufferGeometry分配材质数组实现多面独立材质

核心问题原因 #

你碰到的模型消失问题是2个常见的参数配置错误导致的：

1. BufferGeometry.addGroup()的第二个参数是该分组包含的索引条目总数，不是三角形数量。每个三角形需要占3个索引条目，你之前的分组长度参数配置过小，无法构成有效渲染面。
2. 部分分组的materialIndex未和材质数组下标一一对应，或者材质数组长度不匹配分组配置。

具体修改步骤 #

• 第一步：修正分组参数配置
  你总共定义了8个三角面，对应索引数组总长度为8*3=24，5个分组的参数需要按索引范围配置：

// 3个矩形侧面，每个包含2个三角面，对应6个索引条目
geometry.addGroup(0, 6, 0); // 第一个侧面，对应材质数组下标0
geometry.addGroup(6, 6, 1); // 第二个侧面，对应材质数组下标1
geometry.addGroup(12, 6, 2); // 第三个侧面，对应材质数组下标2
// 2个三角形底面，每个包含1个三角面，对应3个索引条目
geometry.addGroup(18, 3, 3); // 上底面，对应材质数组下标3
geometry.addGroup(21, 3, 4); // 下底面，对应材质数组下标4

• 第二步：正确传入材质数组
  初始化Mesh时直接传入和分组materialIndex匹配的材质数组即可，可按需添加side: THREE.DoubleSide避免法线方向不对导致的面消失问题：

const materialArray = [
  new THREE.MeshStandardMaterial({ color: 0xff0000, side: THREE.DoubleSide }),
  new THREE.MeshStandardMaterial({ color: 0x00ff00, side: THREE.DoubleSide }),
  new THREE.MeshStandardMaterial({ color: 0x0000ff, side: THREE.DoubleSide }),
  new THREE.MeshStandardMaterial({ color: 0xffff00, side: THREE.DoubleSide }),
  new THREE.MeshStandardMaterial({ color: 0xff00ff, side: THREE.DoubleSide })
];
const prismMesh = new THREE.Mesh(geometry, materialArray);

额外排查点 #

如果修改后仍有面消失，可检查索引数组的顶点顺序：Three.js默认仅渲染逆时针顶点顺序的正面，调整索引顺序或统一给材质开启双面渲染即可解决。

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