title: THREE.js render in a canvas on top/overlapping another renderer
body: <p>If I remove the base screen renderer, the canvas one shows, if not, then nothing shows, this seems to only be an issue those when I am trying to render gltf models, if I construct the geometry with THREE.js types, one can render on top of another.</p>
  
  <p>I render my base scene with </p>
  
  <pre><code>    var renderer = new THREE.WebGLRenderer( { canvas: cn } );
          renderer.setSize(cn.width, cn.height);
          renderer.setClearColor(0x111517);
  ...
   var le = new THREE.GLTFLoader();
       le.load('/users/they/Documents/amit/bird.glb',
        function (gltf) {
        const cube = gltf.scene;
        cube.position.z = -3;
        cube.position.y = 0;
        cube.position.x = 0;
        cube.scale.z = 5;
        cube.scale.y = 5.1;
        cube.scale.x = 5.1;
        cube.rotation.z = 0;
        cube.rotation.y = 0;
        cube.rotation.x = 0;
        scene.add(cube);
  });
  
  ...
  renderer.render(scene,camera2);
  </code></pre>
  
  <p>and my canvas with</p>
  
  <pre><code>var renderer2 = new THREE.WebGLRenderer( { canvas: cn } );
          renderer2.setSize(cn.width, cn.height);
          renderer2.setClearColor(0x111517);
  ...
  renderer2.render(buff_scene,camera);
  </code></pre>
  
  <p>Any help appreciated.</p>