three.js 重叠视口

Question

我正在尝试在场景相机上方渲染一个相机（gui 相机）。我的想法是把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 对象放在那里可能是有意义的。

three.js 重叠视口

Overlapping viewports with three.js

javascript

transparency

viewport

three.js