javascript - THREE.js renderTarget 具有半透明纹理，看起来与黑色背景混合

Question

我在 scene1plane1 上添加了半透明 texture
我将此场景1渲染到renderTarget中，而不是在放置在另一个场景2上的另一个平面2上使用renderTarget.texture。
问题是我看到纹理的半透明看起来像是与黑色背景混合的。请参阅 jsfiddle expample 。
对plane1 Material 使用THREE.NoBlending似乎是我问题的答案，但对我来说不是一个选择。因为pane1可以与scene1上的其他平面重叠。
有谁知道如何避免这种行为？

Answer 1

您正在使用 RenderTarget 的纹理作为平面网格的漫反射贴图。

请注意，RenderTarget.texture 是使用 THREE.NormalBlending 创建的，因此，纹理具有“预乘 alpha”。也就是说，RenderTarget.texture 中的 RGB channel 乘以纹理的 Alpha channel 。

因此，当您使用渲染目标的纹理作为贴图时，您需要指定自定义混合函数。当源和目标都具有预乘 Alpha 时，适当的混合函数是:

blending: THREE.CustomBlending,

blendEquation: THREE.AddEquation,
blendSrc: THREE.OneFactor,
blendDst: THREE.OneMinusSrcAlphaFactor,
blendSrcAlpha: THREE.OneFactor,
blendDstAlpha: THREE.OneMinusSrcAlphaFactor,

请参阅维基百科文章中的“Alpha 混合”Alpha Compositing .

更新了 fiddle :https://jsfiddle.net/njetLLz7/212/

三.js r.97