1

can somebody help to understand why when merging the geometries of these boxes, I can't see through them correctly from some angles?

Blue are normal boxes, Orange are merged geometries. Using MeshLambertMaterial with an opacity of 0.5.

Thanks in advance

code: https://codesandbox.io/s/three-alpha-issue-bfdhk?file=/src/index.ts

screenshot: enter image description here

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);
General Grievance
  • 4,555
  • 31
  • 31
  • 45
Rod
  • 11
  • 2
  • Welcome to Stack Overflow. Please take a moment to [take the tour](https://stackoverflow.com/tour) and visit the [Help Center](https://stackoverflow.com/help), especially [`How do I ask a good question?`](https://stackoverflow.com/help/how-to-ask) and [`How to create a Minimal, Reproducible Example`](https://stackoverflow.com/help/minimal-reproducible-example). Also, please embed your code/screenshot in your question. When (not if) the linked resource goes away, your question will lose important context for future readers. – TheJim01 Oct 08 '21 at 14:28
  • 1
    Thanks @TheJim01, when I attempted to embed the code and screenshots it told me I can't do it because I don't have enough reputation. Hopefully links should stay for a while (image is stored in Stackoveflow, code in my codesandbox account), but as soon as I have enough reputation happy to embed both. – Rod Oct 08 '21 at 15:10

1 Answers1

0

You could set depthWrite: false or depthTest: false for the material.

const mat = new MeshLambertMaterial({
  transparent: true,
  opacity: 0.5,
  color: "#4469BE",
  depthWrite: false,
});

Came across the solution from a similar question with material transparency while overlapping with itself

A more detailed explanation of the difference between both is provided here: https://stackoverflow.com/a/37651610/4290781

Deep
  • 532
  • 3
  • 10