javascript - THREE.js 多个渲染器都动态调整大小
问题描述
我的第一个画布正在显示我的第一个渲染器,它会根据浏览器窗口适当调整大小。但是,尽管使用了相同的方法,我在第二个画布中的第二个渲染器并没有调整大小。
最终目标是最终拥有更多的渲染函数,以及与渲染器相关的文本信息。
也许我以错误的方式解决这个问题,但任何建议都会有所帮助。谢谢你。
/////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>
解决方案
与其创建不同的函数,不如创建通用函数并传递您的画布来处理多个渲染器。
演示
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>
推荐阅读
- python - 除了 Jupyter Notebook,Anaconda 还需要安装到 PC 上吗?
- python - 为什么 python numpy sum() 给出的值与 + 不同?
- ios - 使用 XCode 12 和模拟器崩溃弹出窗口
- dynamic - APEX:将值传递给模态页面,设置为 Null,提交导致问题
- python - 无法在 Windows 上的 conda Python 3.8.3 环境中使用 pipenv 创建虚拟环境
- python - 图论 - 将 3D 空间中的点与其他三个最近点连接(基于距离)
- c# - 获取访问令牌以从 WsFed Azure AD 身份验证客户端调用受保护的 WebApi
- spring-mvc - Spring 5 MVC 测试自定义验证器
- java - Spring Boot App 使用 Spring Cloud AWS RDS Aurora - 如何分发读取查询
- prometheus - 如何在普罗米修斯中对具有高基数的指标发出警报