¿Alguien puede ayudarme a entender por qué cuando fusiono las geometrías de estas cajas, no puedo ver a través de ellas correctamente desde algunos ángulos?
Blue son cajas normales, Orange son geometrías fusionadas. Usando MeshLambertMaterial con una opacidad de 0.5.
Gracias por adelantado
código: https://codesandbox.io/s/three-alpha-issue-bfdhk?file=/src/index.ts
fragmento de código:
// 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);Puede establecer depthWrite: false o depthTest: false para el material.
const mat = new MeshLambertMaterial({ transparent: true, opacity: 0.5, color: "#4469BE", depthWrite: false, });Encontré la solución de una pregunta similar con transparencia material mientras se superpone consigo mismo
Aquí se proporciona una explicación más detallada de la diferencia entre ambos: https://stackoverflow.com/a/37651610/4290781