不同画布上的多个场景 [英] Multiple scenes on different canvases

问题描述

我正在尝试在两个不同的画布上创建两个场景.在 Three.js 中可以吗?

I'm trying to create two scenes on two different canvases. Is it possible in Three.js?

var scene1 = new THREE.Scene()
var scene2 = new THREE.Scene()
scene1.add(camera1)
scene2.add(camera2)

...

renderer.render(scene1, camera1)
renderer.render(scene2, camera2)

会这样吗?

推荐答案

是的 - 这是完全可能的，但渲染器实例总是绑定到画布的 WebGLContext.因此，您需要为您拥有的每个画布创建一个渲染器.所以这将是

Yes - it is totally possible, but the renderer-instance is always bound to the WebGLContext of the canvas. So you need to create create a renderer for every canvas you have. So this would be

renderer1.render(scene1, camera1);
renderer2.render(scene2, camera2);

(反之亦然:您可以使用多个渲染器用不同的相机渲染相同的场景)

(the other way around works as well: you can use multiple renderers to render the same scene with different cameras)

根据评论进行编辑

您还可以仅使用一个渲染器将多个场景渲染到同一画布的不同区域中.为此，您需要为这样的每个场景设置不同的视口和剪刀测试(基于 https://Threejs.org/examples/#webgl_multiple_views)

You can also render multiple scenes into different regions of the same canvas, using just one renderer. For this you need to setup a different viewport and scissor-test for every scene like this (based on https://threejs.org/examples/#webgl_multiple_views)

// first, render scene normally:
camera.aspect = totalWidth / totalHeight;
camera.updateProjectionMatrix();
renderer.setViewport(0, 0, totalWidth, totalHeight);
renderer.setScissorTest(false);
renderer.render( scene1, camera1 );

// then, render the overlay
renderer.setViewport(left, bottom, width, height);
renderer.setScissor(left, bottom, width, height);
renderer.setScissorTest(true);
renderer.setClearColor(view.background);

camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.render( scene2, camera2 );

这篇关于不同画布上的多个场景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！