<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>

body{
  margin:0px;
}

// Simple three.js example

var renderer, sceneA,sceneB, camera, controls, alpha, boxMesh, curve, startTime;

init();
animate();

function init() {

    // renderer
  renderer = new THREE.WebGLRenderer({alpha:true, antialias:true});
  renderer.autoClear = false;
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
  console.log(renderer)
    // scene
  sceneA = new THREE.Scene();
    sceneB = new THREE.Scene();

    // camera
  camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
  camera.position.set(0, 0, 40);

    // controls
  controls = new THREE.OrbitControls( camera );
    const materialA = new THREE.MeshStandardMaterial({color:0xff0000});
  const materialB = new THREE.MeshStandardMaterial({color:0x00ff00});
  const sphere = new THREE.Mesh(new THREE.SphereGeometry(5,30,30),materialA);
  
  const box = new THREE.Mesh(new THREE.BoxGeometry(12,12,12),materialB);
   sceneB.add(box);
  
  const lightA = new THREE.PointLight( 0xffffff, 1, 100);
    const lightB = new THREE.PointLight( 0xffffff, 1, 100);
  lightA.position.set(30,30,30);
  lightB.position.set(30,30,30);
sceneA.add(sphere,lightA);
  sceneB.add(box,lightB);
}
function animate() {

		
  requestAnimationFrame( animate );
  renderer.render( sceneB, camera );
  renderer.clearDepth();
  renderer.render( sceneA, camera );


}