不同畫布上的多個場景

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);