整个对象上的 Three.js alpha

Posted 2023-03-06

【中文标题】整个对象上的 Three.js alpha

【英文标题】：Three.js alpha on entire object

【发布时间】：2015-10-26 04:25:50

【问题描述】：

我正在创建包含多个 Collada 对象的 Three.js 场景。我希望能够在 Three.js 中设置每个 Collada 对象的不透明度（以便对象可以根据需要融入和退出场景）。

我可以设置对象内各个材质的不透明度，但这会产生相当奇怪和不受欢迎的效果：

loader.options.convertUpAxis = true;
loader.load(src, function(collada) 
    collada.scene.traverse(function (child) 
        if( child.material ) 
            child.material.opacity = 0.5;
            child.material.transparent = true;
        
(etc.)

我正在寻找的是能够在整个 collada 对象上设置不透明度（实际上是渲染它，然后设置不透明度），如所附屏幕截图的底部所示。

我通过在包含 Three.js 场景的画布上设置不透明度来实现屏幕截图底部显示的内容，但是当有多个 collada 对象时，这变得不切实际，因为它需要单独的场景/画布每个新对象。

【问题讨论】：

见***.com/questions/36947704/…

【参考方案1】：

实际上，听起来您所要求的是对象最终渲染图像的不透明度，在背景之上（毕竟，您没有通过引擎看到机身 - 那些是不透明的彼此）。

为此，最好的方法可能是使用三个 EffectComposer 并为 BG 和 FG 元素渲染目标。然后这些图像可以很容易地混合。查看三个渲染到纹理示例。

另一种选择是在飞机上使用 BG 纹理并以不同的透明度渲染它，但要对其进行排序可能比它的价值更麻烦。最简单的方法是将不透明的飞机渲染到渲染目标，然后将天空绘制到常规帧缓冲区，然后在其上合成飞机。只有一个画布，如果您需要以不同的透明度渲染多个项目，您可以重新使用该渲染目标来构建图像。