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/

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

1 个答案: