THREE.js multiple renderers all dynamically resizing

Question

My first canvas is displaying my first renderer which resizes appropriately with the browser window. However, my second renderer in the second canvas does not resize despite using the same method.

The end goal is to eventually have more render functions going with text information relating the renderers.

Maybe I'm going about this in the wrong way but any advice would be helpful. Thank you.

/////FIRST CANVAS/////

// RENDERER 
var renderer = new THREE.WebGLRenderer({
  canvas: document.getElementById('myCanvas'),
  antialias: true
});
renderer.setClearColor(0x00ff00);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth * .4, window.innerHeight * .4);
var camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 3000);
var scene = new THREE.Scene();
// WINDOW RESIZE FUNCTION 

window.addEventListener("resize", onWindowResize);

function onWindowResize() {
  camera.aspect = (window.innerWidth * .4) / (window.innerHeight * .4);
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth * .4, window.innerHeight * .4);
}

var light = new THREE.AmbientLight(0xffffff, 0.5); // will light the dark sides of the object
scene.add(light);

var light1 = new THREE.PointLight(0xffffff, 0.5); //will light the front of the object 
scene.add(light1);

var geometry = new THREE.CubeGeometry(100, 100, 100); //(x,y,z) ?
var material = new THREE.MeshLambertMaterial({
  color: 0xF3FFE2
}); // this material will alow color, the parameter sets the solor of the object
var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, -1000);

scene.add(mesh);

// ANIMATION 
requestAnimationFrame(render);

function render() {
  mesh.rotation.x += 0.1;
  mesh.rotation.y += 0.1;
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}

//document.body.appendChild(renderer.domElement);

  /////THIS IS IS THE OTHER CANVAS////

  // RENDERER 00 
  var renderer00 = new THREE.WebGLRenderer({
    canvas: document.getElementById('myCanvas00'),
    antialias: true
  });
renderer00.setClearColor(0x00ff00);
renderer00.setPixelRatio(window.devicePixelRatio);
renderer00.setSize(window.innerWidth * .4, window.innerHeight * .4);

var camera00 = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 3000);
var scene00 = new THREE.Scene();

// WINDOW RESIZE FUNCTION 00
window.addEventListener("resize00", onWindowResize00);

function onWindowResize00() {
  camera00.aspect = (window.innerWidth * .4) / (window.innerHeight * .4);

  camera00.updateProjectionMatrix();
  renderer00.setSize(window.innerWidth * .4, window.innerHeight * .4);
}

// Lights00
var light00 = new THREE.AmbientLight(0xffffff, 0.5); // will light the dark sides of the object
scene00.add(light00);

var light100 = new THREE.PointLight(0xffffff, 0.5); //will light the front of the object 
scene00.add(light100);

// Geometry00
var geometry00 = new THREE.CubeGeometry(100, 100, 100); //(x,y,z) ?

// Material00
var material00 = new THREE.MeshLambertMaterial({
  color: 0xF3FFE2
}); // this material will alow color, the parameter sets the solor of the object

var mesh00 = new THREE.Mesh(geometry00, material00);
mesh00.position.set(0, 0, -1000);

scene00.add(mesh00);

// ANIMATION 00

requestAnimationFrame(render00);

function render00() {
  mesh00.rotation.x += 0.01;
  mesh00.rotation.y += 0.01;
  renderer00.render(scene00, camera00);
  requestAnimationFrame(render00);
}

body {
  margin: 0;
  overflow: hidden;
}

canvas {
  background: red;
  font: 12px, #5673a0;
  font-family: verdana;
}

<script src="https://ajax.googleapis.com/ajax/libs/threejs/r76/three.min.js"></script>

<div>
  <p>div above myCanvas</p>
</div>

<canvas id="myCanvas"></canvas>

<div>
  <p>div above myCanvas00</p>
</div>

<canvas id="myCanvas00"></canvas>

Answer 1

Instead of creating different function create common function and passed your canvas to handle the multiple renderers .

DEMO

function rendererCommon(canvas) {
    var renderer = new THREE.WebGLRenderer({
            canvas: document.getElementById(canvas),
            antialias: true
        }),
        camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 3000),
        scene = new THREE.Scene(),
        light = new THREE.AmbientLight(0xffffff, 0.5), // will light the dark sides of the object;
        light1 = new THREE.PointLight(0xffffff, 0.5), //will light the front of the object
        geometry = new THREE.CubeGeometry(100, 100, 100), //(x,y,z) ?,
        material = new THREE.MeshLambertMaterial({
            color: 0xF3FFE2
        });// this material will alow color, the parameter sets the solor of the object

    renderer.setClearColor(0x00ff00);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth * .4, window.innerHeight * .4);


    //WINDOW RESIZE FUNCTION 

    window.addEventListener("resize", onWindowResize);

    function onWindowResize() {

        camera.aspect = (window.innerWidth * .4) / (window.innerHeight * .4);

        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth * .4, window.innerHeight * .4);
    }



    scene.add(light);
    scene.add(light1);

    let mesh = new THREE.Mesh(geometry, material);
  
    mesh.position.set(0, 0, -1000);

    scene.add(mesh);

    //ANIMATION 
    requestAnimationFrame(render);

    function render() {
        mesh.rotation.x += 0.1;
        mesh.rotation.y += 0.1;
        renderer.render(scene, camera);
        requestAnimationFrame(render);
    }
}
//Create for myCanvas
rendererCommon('myCanvas');

//Create for myCanvas00
rendererCommon('myCanvas00');

body{
  margin: 0; 
  overflow: hidden; 

}
div{
display: inline-block;
}

canvas{
  background: red;
  font: 12px, #5673a0;
  font-family: verdana;
}

<script src="https://ajax.googleapis.com/ajax/libs/threejs/r76/three.min.js" ></script>

<div>
  <p>div above myCanvas</p>
  <canvas  id="myCanvas"></canvas>
</div>

<div>
  <p>div above myCanvas00</p>
  <canvas  id="myCanvas00"></canvas>
</div>

Answer 2

I think I figured it out.

     
function rendererCommon(canvas) {
    var renderer = new THREE.WebGLRenderer({
            canvas: document.getElementById(canvas),
            antialias: true
        }),
        camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 3000),
        scene = new THREE.Scene(),
        light = new THREE.AmbientLight(0xffffff, 0.5), // will light the dark sides of the object;
        light1 = new THREE.PointLight(0xffffff, 0.5), //will light the front of the object
        geometry = new THREE.CubeGeometry(100, 100, 100), //(x,y,z) ?,
        material = new THREE.MeshLambertMaterial({
            color: 0xF3FFE2
        });// this material will alow color, the parameter sets the solor of the object

    renderer.setClearColor(0x4286f4);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth * .4, window.innerHeight * .4);


    //WINDOW RESIZE FUNCTION 

    window.addEventListener("resize", onWindowResize);

    function onWindowResize() {

        camera.aspect = (window.innerWidth * .4) / (window.innerHeight * .4);

        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth * .4, window.innerHeight * .4);
    }



    scene.add(light);
    scene.add(light1);

    let mesh = new THREE.Mesh(geometry, material);
  
    mesh.position.set(0, 0, -1000);

    scene.add(mesh);

    //ANIMATION 
    requestAnimationFrame(render);

    function render() {
        mesh.rotation.x += 0.1;
        mesh.rotation.y += 0.1;
        renderer.render(scene, camera);
        requestAnimationFrame(render);
    }
}




function rendererCommon00(canvas) {
    var renderer = new THREE.WebGLRenderer({
            canvas: document.getElementById(canvas),
            antialias: true
        }),
        camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 3000),
        scene = new THREE.Scene(),
        light = new THREE.AmbientLight(0xffffff, 0.5), // will light the dark sides of the object;
        light1 = new THREE.PointLight(0xffffff, 0.5), //will light the front of the object
        
        geometry = new THREE.BoxGeometry(100,100,100,10,10,10);
         material = new THREE.PointsMaterial({
            size: 6,
            color: 0x000000
        });// this material will alow color, the parameter sets the solor of the object

    renderer.setClearColor(0xc9d5e8);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth * .4, window.innerHeight * .4);


    //WINDOW RESIZE FUNCTION 

    window.addEventListener("resize", onWindowResize);

    function onWindowResize() {

        camera.aspect = (window.innerWidth * .4) / (window.innerHeight * .4);

        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth * .4, window.innerHeight * .4);
    }



    scene.add(light);
    scene.add(light1);

    let mesh = new THREE.Points(geometry, material);
  
    mesh.position.set(0, 0, -1000);

    scene.add(mesh);

    //ANIMATION 
    requestAnimationFrame(render);

    function render() {
        mesh.rotation.x += 0.002;
        mesh.rotation.y += 0.002;
        mesh.rotation.z += 0.002;
        renderer.render(scene, camera);
        requestAnimationFrame(render);
    }
}




function rendererCommon01(canvas) {
    var renderer = new THREE.WebGLRenderer({
            canvas: document.getElementById(canvas),
            antialias: true
        }),
        camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 3000),
        scene = new THREE.Scene(),
        light = new THREE.AmbientLight(0xffffff, 0.5), // will light the dark sides of the object;
        light1 = new THREE.PointLight(0xffffff, 0.5), //will light the front of the object
        //Dodecahedron
        geometry = new THREE.BoxGeometry(100,100,100);
        material = new THREE.MeshPhongMaterial({
           color: 0xF3FFE2
            
        });// this material will alow color, the parameter sets the solor of the object

    renderer.setClearColor(0x00ff00);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth * .4, window.innerHeight * .4);


    //WINDOW RESIZE FUNCTION 

    window.addEventListener("resize", onWindowResize);

    function onWindowResize() {

        camera.aspect = (window.innerWidth * .4) / (window.innerHeight * .4);

        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth * .4, window.innerHeight * .4);
    }



    scene.add(light);
    scene.add(light1);

    let mesh = new THREE.Mesh(geometry, material);
  
    mesh.position.set(0, 0, -1000);

    scene.add(mesh);

    //ANIMATION 
    requestAnimationFrame(render);

    function render() {
        mesh.rotation.x += 0.0001;
        mesh.rotation.y += 0.002;
        renderer.render(scene, camera);
        requestAnimationFrame(render);
    }
}

//Create for myCanvas
rendererCommon('myCanvas');

//Create for myCanvas00
rendererCommon00('myCanvas00');

//Create for myCanvas01
rendererCommon01('myCanvas01');

     body{
  margin: 0; 
  overflow: hidden; 

}
div{
display: inline-block;
}

canvas{
  background: red;
  font: 12px, #5673a0;
  font-family: verdana;
}

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    </style>
</head>
<body>

    <script src="https://ajax.googleapis.com/ajax/libs/threejs/r76/three.min.js" ></script>
    
    
<div>
  <p>div above myCanvas</p>
  <canvas  id="myCanvas"></canvas>
</div>



<div>
  <p>div above myCanvas00</p>
  <canvas  id="myCanvas00"></canvas>
</div>


<div>
  <p>div above myCanvas01</p>
  <canvas  id="myCanvas01"></canvas>
</div>



</body>
</html>