異なるキャンバスに複数のシーンがあります

Question

2つのキャンバスで2つのシーンを作成しようとしています。 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); 

（あなたは別のカメラで同じシーンをレンダリングするために、複数のレンダラを使用することができる他の方法は、周りにも動作します）になります1つのレンダラーを使用して複数のシーンを同じキャンバスの異なる領域にレンダリングします。このためには、セットアップに（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);