javascript - THREE.js 多个渲染器都动态调整大小

Question

我的第一个 Canvas 正在显示我的第一个渲染器，它会根据浏览器窗口适当调整大小。但是，尽管使用相同的方法，但我在第二个 Canvas 中的第二个渲染器并没有调整大小。

最终目标是最终有更多渲染函数与渲染器相关的文本信息一起使用。

也许我以错误的方式解决这个问题，但任何建议都会有所帮助。谢谢。

/////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

与其创建不同的函数，不如创建通用函数并传递 Canvas 来处理多个渲染器。

演示

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>