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

我想在我的场景中添加遮罩效果。 我发现这个很酷的JSFIDLE：

我一直在想，是否可以将纹理的白色部分设置为透明，以便根据上面的平面纹理裁剪背景对象

我试图玩

alphaTest

值，但没有成功

---

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

我不能100%确定我是否理解您的预期结果，但应该可以通过后处理实现效果。在下面的实时演示中，

MaskPass

用于创建一个遮罩，在该遮罩中不渲染实际美丽过程的像素。重要的代码部分是：

var clearPass=new clearPass（）；
var maskPass=新maskPass（场景掩码、摄像头）；
maskPass.inverse=true；
var renderPass=新的renderPass（场景、摄影机）；
renderPass.clear=false；
var clearMaskPass=新的clearMaskPass（）；
var outputPass=newshaderpass（CopyShader）；
变量参数={
minFilter:THREE.LinearFilter，
磁过滤器：三线过滤器，
格式：THREE.RGBFormat，
模具缓冲区：真
};
var renderTarget=new THREE.WebGLRenderTarget（window.innerWidth、window.innerHeight、parameters）；
composer=新的EffectComposer（渲染器、渲染目标）；
作曲家：addPass（clearPass）；
作曲者：addPass（maskPass）；
作曲家：addPass（renderPass）；
作曲家addPass（clearMaskPass）；
编写器。addPass（outputPass）；

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

---

现场演示：

我不能100%确定我是否理解您的预期结果，但应该可以通过后期处理实现效果。在下面的实时演示中，

MaskPass

用于创建一个遮罩，在该遮罩中不渲染实际美丽过程的像素。重要的代码部分是：

var clearPass=new clearPass（）；
var maskPass=新maskPass（场景掩码、摄像头）；
maskPass.inverse=true；
var renderPass=新的renderPass（场景、摄影机）；
renderPass.clear=false；
var clearMaskPass=新的clearMaskPass（）；
var outputPass=newshaderpass（CopyShader）；
变量参数={
minFilter:THREE.LinearFilter，
磁过滤器：三线过滤器，
格式：THREE.RGBFormat，
模具缓冲区：真
};
var renderTarget=new THREE.WebGLRenderTarget（window.innerWidth、window.innerHeight、parameters）；
composer=新的EffectComposer（渲染器、渲染目标）；
作曲家：addPass（clearPass）；
作曲者：addPass（maskPass）；
作曲家：addPass（renderPass）；
作曲家addPass（clearMaskPass）；
编写器。addPass（outputPass）；

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

---

现场演示：

感谢您的回答。我希望找到一种不使用任何后期处理方法的方法，但实际上它在JSFIDLE上非常有效，我将尝试iTunes。我的渲染器的{alpha:true}属性似乎不适用于composer方法：在使用composer时，有没有办法保持画布的透明度？谢谢你是的，渲染目标必须是

RGBA

格式：谢谢你的回答。我希望找到一种不使用任何后期处理方法的方法，但实际上它在JSFIDLE上非常有效，我将尝试iTunes。我的渲染器的{alpha:true}属性似乎不适用于composer方法：在使用composer时，有没有办法保持画布的透明度？谢谢。是的，渲染目标必须采用

RGBA

格式：