2 scenes normal rendering

by rocket5tim

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<canvas class="webgl"></canvas>

JavaScript

let canvas, fgScene, bgScene, camera, renderer, controls

const sizes = {
  width: window.innerWidth,
  height: window.innerHeight,
}

function init() {
  canvas = document.querySelector('canvas.webgl');

  fgScene = new THREE.Scene();
  bgScene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(40, sizes.width / sizes.height, 0.1, 100);
  camera.position.copy(new THREE.Vector3(0, 2, 10));
  camera.lookAt(new THREE.Vector3());
  
  renderer = new THREE.WebGLRenderer({
    //alpha: true,
    canvas: canvas,
  });
  renderer.autoClear = false;
  renderer.setSize(sizes.width, sizes.height);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
  
  controls = new THREE.OrbitControls(camera, canvas);
  controls.enableDamping = true;

  window.addEventListener('resize', resize, false);
}

function createSceneObjects() {

  // foreground objects
  const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
  directionalLight.position.set(10, 10, 10);
  directionalLight.lookAt(new THREE.Vector3());
  fgScene.add(directionalLight);

  const foregroundCube = new THREE.Mesh(
    new THREE.BoxBufferGeometry(1, 1, 1),
    new THREE.MeshStandardMaterial({
      color: 'grey'
    })
  );
  fgScene.add(foregroundCube);

  // background objects
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
  bgScene.add(ambientLight);

  const backgroundCube = new THREE.Mesh(
    new THREE.BoxBufferGeometry(1, 1, 1),
    new THREE.MeshStandardMaterial({
      color: 'blue'
    })
  );
  //backgroundCube.position.z = -4;
  backgroundCube.scale.copy(new THREE.Vector3(5, 0.5, 5));
  bgScene.add(backgroundCube);
}

function resize() {
  sizes.width = window.innerWidth;
  sizes.height = window.innerHeight;

  camera.aspect = sizes.width / sizes.height;
  camera.updateProjectionMatrix();

  renderer.setSize(sizes.width, sizes.height);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
}

function updateRender() {
  renderer.clear();
 ...