Three.js 不同画布上的多个场景

我试图在两张不同的画布上创建两个场景。在Three.js中可能吗

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

---

它会这样工作吗？

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

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

（另一种方法也适用：可以使用多个渲染器使用不同的摄影机渲染同一场景）

根据评论进行编辑

也可以仅使用一个渲染器将多个场景渲染到同一画布的不同区域中。为此，您需要为每个场景设置不同的视口和剪刀测试（基于）

---

你试过了吗？没有。但我正在考虑。我试过使用多个渲染器，但我在用户与应用程序交互期间创建和销毁了很多画布。这会导致达到某种渲染器的极限。在一些迭代之后，它停止为新画布创建渲染器。然后我考虑了这个单一渲染器的方法，但我不知道它是否会起作用，我不知道如何使它起作用。@PogromcaMotyli如果你为用户交互生成和销毁画布，你就没有正确地处理问题。在这种情况下，取决于你怎么做，您可能需要格外小心才能正确处理渲染器的销毁（尤其是调用

renderer.dispose（）

）实例。现在，我正在使用多个视口方法测试一个渲染器。@Marcs“为用户交互生成和销毁画布您没有正确处理此问题”是什么意思？我必须在游戏中显示一个窗口，然后一个窗口被破坏，其内容过期。我可以把这个盒子藏起来而不是毁掉它，但里面的东西必须清理干净。我的想法是，我不应该创建一个新的画布，而应该在创建后对其进行清洁吗？

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

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