Question

我的第一个画布正在显示我的第一个渲染器，该渲染器会根据浏览器窗口的大小进行适当调整。但是，即使使用相同的方法，第二个画布中的第二个渲染器也不会调整大小。

最终目标是最终拥有更多的渲染功能以及与渲染器相关的文本信息。

也许我会以错误的方式进行此操作，但是任何建议都会有所帮助。谢谢。

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

与其创建其他函数，不如创建通用函数，而是将画布传递给多个渲染器。

演示

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

我想我明白了。

     
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>

THREE.js多个渲染器均动态调整大小

2 个答案: