three.js - 用纹理图像遮罩透明度

Question

我想在我的场景中添加蒙版效果。 我发现了这个很酷的 jsfiddle：https://jsfiddle.net/f2Lommf5/4703/

我一直想知道是否可以将该纹理的白色部分设置为透明，这样我就可以根据上面的平面纹理裁剪我的背景对象。

我尝试使用 alphaTest 值但徒劳无功。

有没有人知道如何达到这个结果？谢谢

Answer 1

我不能 100% 确定我理解您的预期结果，但应该可以通过后期处理来实现效果。在下面的现场演示中，MaskPass 用于创建一个遮罩，其中没有渲染实际美容通道的像素。重要的代码部分是：

var clearPass = new ClearPass();

var maskPass = new MaskPass( sceneMask, camera );
maskPass.inverse = true;

var renderPass = new RenderPass( scene, camera );
renderPass.clear = false;

var clearMaskPass = new ClearMaskPass();
var outputPass = new ShaderPass( CopyShader );

var parameters = {
        minFilter: THREE.LinearFilter,
        magFilter: THREE.LinearFilter,
        format: THREE.RGBFormat,
        stencilBuffer: true
    };

var renderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, parameters );

composer = new EffectComposer( renderer, renderTarget );
composer.addPass( clearPass );
composer.addPass( maskPass );
composer.addPass( renderPass );
composer.addPass( clearMaskPass );
composer.addPass( outputPass );

请注意，遮罩对象（平面）在单独的场景中进行管理。

现场演示：https://jsfiddle.net/e6p0axb1/5/