Any Way To Hide Transparent Adjacent Mesh Overlap Part in ThreeJS

Question

I'm new fish in threeJS and have two transparent boxes below:

and want to change or hide the color of the overlap part from red box to the color blending with the green box and back non-transparent objects:

here's two materials:

 getTransparentMesh(color = 0x990000) {
    const geo = new THREE.BoxGeometry(100, 100, 100)
    const mat = new THREE.MeshBasicMaterial({
      color: color,
      transparent: true,
      opacity: 0.5
    })
    const mesh = new THREE.Mesh(geo, mat)
    return mesh
  }

  addTransparentMeshes() {
    this.meshA = this.getTransparentMesh(0xee8800)
    this.meshB = this.getTransparentMesh(0x88ff00)

    this.meshA.position.set(20, 0, -50)
    this.meshB.position.set(-30, 0, 50)

    const scene = this.engine.scene
    scene.add(this.meshA)
    scene.add(this.meshB)
  }

nothing special options, is there any way can do that? hide or replace the overlap transparent color from red(maybe not red, my bad) box.

Don McCurdy · Accepted Answer · 2025-05-14 13:32:08Z

1

One approach would be to override object.renderOrder to ensure that the nearer box renders first. By default render order is back-to-front for transparent meshes. But for a free-moving camera and objects in complex arrangements that might be tricky to guarantee. In that case you could instead create clones of each object configured to render only to the depth buffer, with material.colorWrite=false, and set their render order to draw first. Then when you draw the actual objects, set depthTest to EqualDepth. This is essentially a depth pre-pass, so that when drawing the objects we know which depths to discard.

See: https://discourse.threejs.org/t/ignore-internal-transparency-of-a-mesh/78931/4

three.js r176

answered May 14 at 13:32

Don McCurdy

12.2k4 gold badges46 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Any Way To Hide Transparent Adjacent Mesh Overlap Part in ThreeJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related