Could someone assist me in understanding why, when merging the geometries of these boxes, I am encountering visibility issues from certain angles?
Blue boxes represent normal individual boxes, while Orange boxes are the result of merged geometries.
I am using MeshLambertMaterial with an opacity of 0.5.
Thank you in advance for any help or insights.
code: https://codesandbox.io/s/three-alpha-issue-bfdhk?file=/src/index.ts
screenshot: https://i.sstatic.net/NWD8D.png
code fragment:
// create boxes and add them to the scene (right, blue)
const boxGeo = new BoxGeometry(0.1, 0.1, 0.1);
const mat = new MeshLambertMaterial({
transparent: true,
opacity: 0.5,
color: "#4469BE"
});
const boxes = [
[ 0, 0, 0.1], [ 0, 0, -0.1], [ 0, 0.15, 0.1], [ 0, 0.15, -0.1],
[0.15, 0, 0.1], [0.15, 0, -0.1], [0.15, 0.15, 0.1], [0.15, 0.15, -0.1]
].map((v) => {
const box = new Mesh(boxGeo, mat);
box.position.fromArray(v);
box.updateMatrix();
return box;
});
const group = new Group();
group.position.x = 0.1;
group.add(...boxes);
scene.add(group);
// merge boxes and add them to the scene (left, orange)
// issue: you can't see through some merged boxes from some angles
const geos = boxes.map((m) => m.geometry.clone().applyMatrix4(m.matrix));
const geo = BufferGeometryUtils.mergeBufferGeometries(geos);
const mergeMat = mat.clone();
mergeMat.color = new Color("#fa6900");
const merge = new Mesh(geo, mergeMat);
merge.position.x -= 0.25;
scene.add(merge);