Question

我最近创建了一个渲染场景的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的{{1}}，添加了相应的渲染通道，我在上面的代码中使用composer切换了renderer.render( scene, camera )，但现在小地图消失了;有关实例，请参阅http://stemkoski.github.io/Three.js/Viewports-Minimap-Effects.html。

如何修复此示例？更具体地说，composer.render()中的设置是否需要设置为与之后的视口渲染一起使用？或者甚至更好，是否可以向作曲家添加第二个RenderPass，以允许我们使用视口？

Answer 1

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

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

如果您的代码没有这样做，我认为您很幸运。

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

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

three.js r.62

Three.js - 一起使用视口和EffectComposer

1 个答案: