与three.js重叠的视口

Question

我正在尝试使摄像机（图形用户界面摄像机）在场景摄像机上方渲染。我的想法是将gui摄像机设置为具有透明背景，因此可以通过它进行透视，但是它没有按我预期的那样工作。

我定义了渲染器，如：

renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
renderer.setSize(window.innerWidth, window.innerHeight);

而且我正在尝试这样渲染：

// Render Main Camera
renderer.setClearColor(0x000000, 1);
renderer.render(scene, sceneCamera);

// Render GUI Camera
renderer.setClearColor(0x000000, 0);
renderer.render(scene, guiCamera);

[我以https://threejs.org/examples/webgl_multiple_views.html为例，使用了多个视口，但由于它们的视口没有重叠，所以有所不同。

提前感谢。

Answer 1

详细阐述评论。默认情况下，三个将在调用.render()之前清除帧缓冲区。因此，如果多次调用它，效果就好像只调用了最后一个一样。

如果设置renderer.autoClear = false，则将禁用此功能。例如，如果您移动相机，您会看到条纹，因为来自不同框架的对象被一个接一个地绘制。

因此，在第一次渲染之前调用renderer.clear()将允许您通过多次.render()调用来绘制同一帧。

使用const guiScene = new Scene()之类的东西并将UI对象放入其中可能会很有意义。