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

Question

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

我想实现画中画效果，但是我希望"inside picture"透明（只画物体，不画背景）。

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

three.js r.71

Answer 2

我认为更好的解决方案是使用剪刀测试。剪刀测试基本上会丢弃剪刀外的任何片段 window。

当您使用清除颜色、模板值等时，清除方法可能会变得令人讨厌。

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 示例：link。它渲染相同的场景，但想法非常相似。它正在使用剪刀测试。

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

Draw 2 scenes in the same canvas - three.js

canvas

three.js

transparency

renderer