不同画布上的多个场景

Question

我试图在两个不同的画布上创建两个场景。 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) 

将它这样做呢？

Answer 1

是的 - 这是完全可能的，但渲染器实例始终绑定到画布的WebGLContext。所以你需要为每个画布创建一个渲染器。因此，这将是

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

（周围的其他方法的工作原理，以及：您可以使用多个渲染器来渲染不同的摄像机同样的场景）

编辑基于评论

你可以还使用一个渲染器将多个场景渲染到同一个画布的不同区域。为此，您需要为每个场景设置不同的视口和剪刀测试（基于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);