three.js transparent objects in multiple scenes not working

Question

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).

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?

Answer 1

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).