javascript - Three.js - 一起使用视口(viewport)和 EffectComposer

Question

我最近创建了一个 Three.js 演示，它渲染一个场景，然后将视口(viewport)设置为窗口的较小部分，并从头顶摄像头渲染场景，创建迷你 map 样式效果；该代码位于:

http://stemkoski.github.io/Three.js/Viewports-Minimap.html

相关代码片段是:

// w = window width, h = window height, mapWidth = minimap width, mapHeight = minimap height
renderer.setViewport( 0, 0, w, h );
renderer.clear();

// full scene with perspective camera
renderer.render( scene, camera );

// minimap with orthogonal camera
renderer.setViewport( 0, h - mapHeight, mapWidth, mapHeight );
renderer.render( scene, mapCamera );

...它就像一个魅力。

现在，我想通过向场景添加一些后处理来扩展这个示例；我设置了一个名为 composer 的 THREE.EffectComposer，添加了适当的渲染 channel ，然后切换了 renderer.render( scene, camera )在上面的代码中使用composer.render()，但现在小 map 消失了；请参阅http://stemkoski.github.io/Three.js/Viewports-Minimap-Effects.html举个例子。

如何修复这个示例？更具体地说，EffectComposer 中是否有需要设置为随后与视口(viewport)渲染结合使用的设置？或者更好的是，是否可以向编辑器添加第二个 RenderPass 以允许我们使用视口(viewport)？

Answer 1

自从我第一次查看以来，您似乎正在更改代码，但根据您原来的问题，您需要在渲染迷你 map 之前清除深度缓冲区。

renderer.clear( false, true, false );
renderer.render( scene, mapCamera );

如果您的代码在不这样做的情况下也能正常工作，我认为您很幸运。

此外，OrthographicCamera.near 应该是正数，因此近平面位于相机前面。将正交相机向后移动一点，并将近平面设置为合理的正值。

OrthographicCamera.left (.right/.top/.bottom) 应该位于世界坐标中——而不是窗口大小(以像素为单位)的函数。

三.js r.62