canvas - 在同一个 Canvas 中绘制 2 个场景 - Three.js

Question

我想有 2 个场景，每个场景都添加了一个相机，并且我希望它们被绘制在同一个 Canvas 上(但不要分割这个 Canvas )。
我目前使用 2 个渲染器在同一个 Canvas 元素中绘制，但我的问题是第二个渲染器覆盖了第一个渲染器，所以我只能看到两个场景中的一个。
我试过 alpha: true用于渲染器和 setClearColor( 0x000000, 0 );但仍然没有想要的结果。

我想实现画中画效果，但我希望“内图”是透明的(只绘制对象，不绘制背景)。

这可以用three.js吗？

谢谢

Answer 1

如果您有两个场景，并且想要创建画中画效果，则可以使用以下模式。第一组autoClear :

renderer.autoClear = false; // important!

然后在你的渲染循环中，使用这样的模式:

renderer.clear();
renderer.setViewport( 0, 0, window.innerWidth, window.innerHeight );
renderer.render( scene, camera );

renderer.clearDepth(); // important! clear the depth buffer
renderer.setViewport( 10, window.innerHeight - insetHeight - 10, insetWidth, insetHeight );
renderer.render( scene2, camera );

三.js r.71