Two scenes, only one visible

Questions
1

Hi everyone,

I’m currently applying a shader to an entire scene using an effect composer, which bends the scene and alters some colors. I’m looking to add a cube that remains unaffected by this shader effect.

To accomplish this, I’ve tried creating a second scene. I simplified my code significantly just to get both scenes visible at the same time, but I’m running into some issues. Whenever I render the second scene that includes the cube, the original scene disappears. If I stop rendering the second scene, the first one shows up again.

I’m wondering if anyone could advise whether using a second scene is the best approach for this? Ideally, I want the shader to only affect part of the scene, modifying its appearance while leaving other elements like the cube unchanged. I also need to ensure that scrolling and navigation impacts all objects uniformly, maintaining the illusion that they are part of a single cohesive scene.

Here is my code:

import * as THREE from 'https://unpkg.com/three@0.128.0/build/three.module.js';
import { OrbitControls } from 'https://unpkg.com/three@0.128.0/examples/jsm/controls/OrbitControls.js';

// Main Scene Setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(120, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('universe-container').appendChild(renderer.domElement);

// Second Scene Setup for Cube
const cubeScene = new THREE.Scene();
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cubeScene.add(cube);
cube.position.set(0, 0, -5); // Position the cube so it's visible

// Generate random planes
for (let i = 0; i < 30; i++) {
    const material = new THREE.MeshBasicMaterial({
        color: Math.random() * 0xffffff, // Random color for each plane
        side: THREE.DoubleSide
    });
    const geometry = new THREE.PlaneGeometry(1, 1);
    const plane = new THREE.Mesh(geometry, material);
    plane.position.x = (Math.random() - 0.5) * 20;
    plane.position.y = (Math.random() - 0.5) * 20;
    plane.position.z = (Math.random() - 0.5) * 20;
    scene.add(plane);
}

const controls = new OrbitControls(camera, renderer.domElement);
camera.position.z = 10;

function animate() {
    requestAnimationFrame(animate);

    // Explicitly clear the necessary buffers
    renderer.clear();
    renderer.render(scene, camera);  // Render the main scene with planes
    renderer.clearDepth();  // Clear only the depth buffer to render the cube on top
    renderer.render(cubeScene, camera);  // Render the cube scene without clearing color
}

animate();

Thanks a lot for your help!

2

You’d like one

renderer.autoClear = false;

when setting up the renderer.

2 Likes
3

ahhh…! Thanks :slight_smile:

1 Like
4

I struggle again with the same issue.

Thanks to @PavelBoytchev’s help it was easy to place one object in front of the scene.
But I am not able to place one object behind the scene and make sure, that the shader only affects the scene in the front.

Probably I am missing something stupid, but I can’t figure it out.
Would highly appreciate your advice.

Thanks a lot!