在同一个画布中绘制2个场景 - three.js

Question

我希望有两个场景，每个场景都有一个相机，并且它们应该被绘制在同一个画布上（但不要分割这个画布）。我目前使用了两个渲染器来绘制同一个画布元素，但我的问题是第二个渲染器会覆盖第一个，因此我只能看到其中一个场景。我尝试了使用alpha: true的渲染器和setClearColor( 0x000000, 0 );，但仍然没有得到期望的结果。

我想实现画中画效果，但我希望"内部图片"是透明的（只绘制对象，而不是背景）。

这在three.js中是否可能实现？

谢谢。

- ThanosSar

---

你能发布一张显示问题的图片吗？你的两个渲染器都有 setClearColor(0x000000, 0) 吗？ - gaitat

@gaitat：两个渲染器都设置了setClearColor(0x000000, 0)。这张图片没什么有趣的，我只能看到第二个场景，看不到第一个场景。就像第二个渲染器覆盖了画布一样。 - ThanosSar

请参见https://dev59.com/J2cs5IYBdhLWcg3wp133#12666937。 - WestLangley

@WestLangley：这似乎是我的答案。我会研究它并报告是否正确。 - ThanosSar

@gaitat：你确定这是可能的吗？因为我尝试过，即使它是“透明”的，前面的画布仍然会遮挡后面的画布。如果WestLangley的链接不是答案，我会再试一次。 - ThanosSar

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

three.js r.71

- WestLangley

---

是的，没错。当然，第二次渲染也可以使用不同的相机。 - ThanosSar

@WestLangley，你再次救了我的命，你是个伟大的人。我对你的感激之情已经达到了宇宙。谢谢!!! - atom

Answer 2

我认为更好的解决方案是使用剪裁测试。基本上，剪裁测试会丢弃位于剪裁窗口之外的任何片段。

当您使用清除颜色、模板值等时，clear方法可能会变得很麻烦。

for ( ... ) {
    // init left, bottom, etc. with viewport info 

    renderer.setViewport( left, bottom, width, height );
    renderer.setScissor( left, bottom, width, height );
    renderer.setScissorTest( true );

    renderer.render(scene[i], camera[i]);
}

这里有一个关于多视口的three.js示例：链接。它渲染了同一个场景，但是思路非常相似。它使用了剪裁测试。

- shrekshao

---

当我这样做时，它只会绘制最后一个场景，其他所有东西都是黑色的。我该如何防止它在剪切区域内绘制所有黑色内容？ - trusktr

@trusktr 嗯...尝试禁用渲染器的autoClear。如果您将代码链接放在这里可能会有帮助。 - shrekshao