使用 THREE.Renderpass 进行多场景渲染

mja*_*sz1 3 rendering three.js

我有以下问题:尝试使用 RenderPass 渲染多个场景以进行后处理。

现在有2个场景:

1)地形+云

2) 文字层

两个场景都在渲染,但文本层被混合到地形中(通常如果它们在同一个场景中渲染,它应该像这样)。奇怪的是:我可以通过比地形高得多的云看到文字(地形和云在同一场景中进行测试)您可以看到云层上方的文字,但它与地形融为一体

您可以看到云层上方的文字,但它与地形融为一体

为了呈现它,我使用以下代码:

    @renderPass = new THREE.RenderPass( @scene, @camera )
    @renderPass.renderToScreen = true
    @renderPass.clear = false
    @renderPass.clearDepth = true

    @textPass = new THREE.RenderPass( @textScene, @camera )
    @textPass.renderToScreen = true
    @textPass.clear = false
    @textPass.clearDepth = true

@composer = new THREE.EffectComposer( @renderer );

        @composer.addPass( @renderPass )
        @composer.addPass( @textPass )
Run Code Online (Sandbox Code Playgroud)

但是当我尝试使用以下方法正常渲染它们时:

    @renderer.clear()
    @renderer.render @scene, @camera
    @renderer.clearDepth();
    @renderer.render @textScene, @camera
Run Code Online (Sandbox Code Playgroud)

一切都按预期工作。 在此处输入图片说明

for*_*ord 5

RenderPass 实际上没有clearDepth选项。我打开了一个拉取请求来添加对此的支持,这应该可以解决您的问题:

https://github.com/mrdoob/three.js/pull/10159

更新:拉取请求已合并并包含在 r83 版本中,因此您编写的代码现在应该可以工作了。