CODEWITHSUNDEEP
three.jstransparentrenderer
kiennt
kiennt

Reputation: 91

three.js transparent objects in multiple scenes not working

I am using multiple scenes as a workaround for selective lighting. Now, I meet a difficulty in using transparent objects.

For simplity, I created a jsfiddle illustration:

[1]: https://jsfiddle.net/curisiro/w9ke75ma/2/

I have two transparent squares which are in different scenes. The problem is I can see the blue square behind the red square (figure 1) but I can NOT see the red square behind the blue square (figure 2).

Figure 1 Figure 2

With material, by using other effects, depthTest and depthWrite must be set to true as default.

Do you have any solution to solve this problem?

Upvotes: 1

Views: 405

Answers (1)

Berthur
Berthur

Reputation: 4495

Edit: If you insist on using two scenes, you can fix this problem by clearing the depth between the renders:

function render() {
  requestAnimationFrame(render);
  
  this.renderer.clear();
  renderer.render(scene, camera);
  renderer.clearDepth();            // <--- Like this
  renderer.render(scene1, camera);
}

However, this is limiting if you plan to add more complexity to the scene and need depth testing to take place between them. Alternatively, just render to the same scene:

let geometry = new THREE.BoxGeometry(1, 1, 1);
let material = new THREE.MeshStandardMaterial({color: 0x0000ff, transparent: true, opacity: 0.4});
let mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

let geometry1 = new THREE.BoxGeometry(1, 1, 1);
let material1 = new THREE.MeshStandardMaterial({color: 0xff0000, transparent: true, opacity: 0.4});
let mesh1 = new THREE.Mesh(geometry1, material1);
mesh1.position.z = 2;
scene.add(mesh1);

(see forked fiddle). In this case, you would handle selective lighting some other way (layers, or custom materials perhaps, depending on what you need).

Upvotes: 0

Related Questions