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。因此，您需要为每个画布创建一个渲染器。所以这将是

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

（另一种方式也可以：你可以使用多个渲染器用不同的相机渲染相同的场景）

基于评论的编辑

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

{{1}}

不同画布上的多个场景

1 个答案: