I'm having trouble getting the desired result, when rendering a single THREE.BufferGeometry with multiple groups/materials.
I've created the BufferGeoemtry as such:
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);
As you can see, in the actual result the colours are not blending, and the foreground box doesn't let any colour from the boxes behind it through, even though it's transparent and has opacity. Although it seems like it's a function of the order of groups. The "desired result" screenshot is taken from the very same code, but looking from another angle, where boxes are arranged in a different order. So there seems to be some difference in depth handling depending on the order of groups in the BufferGeometry.
I have tried the same scene, with multiple BufferGeometrys, each having their own material, and everything works well in this case. I would like to avoid creating a bufferGeometry per material though.
