Three.js单BufferGeometry多分组下重叠透明材质渲染问题

渲染搭载多个分组、对应多材质的单个THREE.BufferGeometry时，无法得到预期渲染效果：

• 预期效果：
• 实际效果：

使用如下代码创建合并几何体与材质：

const boxes = []
const materials = []
for (const [x, color] of [[-5, 'red'], [0, 'green'], [5, 'blue']]) {
  const geometry = new THREE.BoxGeometry( 4, 4, 4 );
  geometry.translate(x, 0, 0)
  boxes.push(geometry)
  materials.push(new THREE.MeshBasicMaterial({
    color: new THREE.Color(color),
    transparent: true, 
    opacity: 0.3
  }))

}
const combinedGeomtry = THREE.BufferGeometryUtils.mergeBufferGeometries(boxes, true)

const cube = new THREE.Mesh(combinedGeomtry, materials);

具体问题表现：

• 即使所有材质都设置了transparent: true、opacity: 0.3，前景方块也无法透出后方方块的颜色
• 异常与BufferGeometry内的分组顺序直接相关：切换视角改变方块前后排列顺序时，偶尔可得到预期渲染效果
• 单独为每个材质创建独立BufferGeometry、分别生成Mesh的方案渲染效果正常，但需要避免这种写法，寻求单合并几何体方案下的可行解决方案

内容的提问来源于stack exchange，提问作者Mehdi Esfahani