Question

我希望有2个场景，每个场景都添加了一个相机，我希望它们可以在同一个画布上绘制（但不要划分这个画布）。我使用了2个渲染器，它们在同一个画布元素中绘制，但我的问题是第二个渲染器会覆盖第一个，所以我只能看到2个场景中的一个。我为渲染器和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 );

three.js r.71

Answer 2

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

使用清晰的颜色，模板值等时，清晰的方法会变得很糟糕。

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

这是多视图端口上的一个三个例子：link。它呈现相同的场景，但这个想法非常类似。它正在使用剪刀测试。

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

2 个答案: