1

我最近创建了一个渲染场景的 Three.js 演示，然后将视口设置为窗口的较小部分并从头顶摄像机渲染场景，创建迷你地图样式效果；该代码可在以下位置获得：

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

...它就像一个魅力。

现在，我想通过在场景中添加一些后处理来扩展这个示例；我已经设置了一个THREE.EffectComposer被调用composer的 ，添加了适当的渲染通道，并renderer.render( scene, camera )在上面的代码中切换了composer.render()，但是现在小地图消失了；请参阅http://stemkoski.github.io/Three.js/Viewports-Minimap-Effects.html以获取实时示例。

我该如何解决这个例子？更具体地说，是否EffectComposer需要将其中的设置设置为之后与视口渲染一起使用？或者更好的是，是否可以向作曲家添加第二个 RenderPass 以允许我们使用视口？

4

1 回答 1

1

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

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

如果您的代码没有这样做就可以正常工作，我认为您很幸运。

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

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

三.js r.62

于 2013-11-01T21:01:51.810 回答