Three.js 在渲染着色器类之前更改场景

我有一个场景，我有一个着色器，在场景顶部应用绿色正方形。我有一个白色的球体，但我希望当它落在绿色的正方形外面时，这个球体是不可见的。我可以在渲染过程之前移除球体，并在绿色着色器过程之前重新添加吗？如果没有，我如何实现我想要的

以下是我的渲染过程：

renderPass = new THREE.RenderPass(scene, camera);
copyPass = new THREE.ShaderPass(THREE.CopyShader);

colorifyPass = new THREE.ShaderPass(THREE.ColorifyShader);
colorifyPass.uniforms[ "color" ].value = new THREE.Color(0x00ff00);
composer = new THREE.EffectComposer(renderer);
composer.addPass(renderPass);
composer.addPass(colorifyPass);
composer.addPass(copyPass);
copyPass.renderToScreen = true;

以下是我现在拥有的屏幕截图：

---

多亏了WestLangley的例子，我最终以这种方式实现了我想要的：

function initShaders() {
    renderPass = new THREE.RenderPass(scene, camera);
    copyPass = new THREE.ShaderPass(THREE.CopyShader);

    composer = new THREE.EffectComposer(renderer);
    composer.addPass(renderPass);
    composer.addPass(copyPass);
    copyPass.renderToScreen = true;

    colorifyPass = new THREE.ShaderPass(THREE.ColorifyShader);
    colorifyPass.uniforms[ "color" ].value = new THREE.Color(0x00ff00);
    composerIR = new THREE.EffectComposer(renderer);
    composerIR.addPass(renderPass);
    composerIR.addPass(colorifyPass);
    composerIR.addPass(copyPass);
    copyPass.renderToScreen = true;
}

并将此代码添加到渲染函数：

    renderer.setViewport(0, 0, width, height);
    camera.fov = 45;
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    hotSpotsRoot.visible = false;

    renderer.clear();
    composer.render(delta);

    if (irMode) {
        var irWidth = 450;
        renderer.setViewport(width / 2 - irWidth / 2 + 10, 200, irWidth, irWidth);
        camera.fov = 25;
        camera.aspect = 1;
        camera.updateProjectionMatrix();
        hotSpotsRoot.visible = true;

        composerIR.render(delta);
    }

---

听起来像是三个。你想要的就是MaskPass。看见你必须仔细研究源代码。我不知道如何使用MaskPass，但由于你的示例，我使用了double composer，如我发布的答案所示。如果你有更好的建议，请告诉我。