整个对象上的Three.js alpha

Question

我正在创建包含多个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对象时，这将变得不切实际，因为它需要单独的场景/画布每个新对象。

Answer 1

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

为此，最佳路线可能是使用THREE EffectComposer并渲染BG和FG元素的目标。然后可以轻松混合这些图像。看看三个渲染到纹理的样本。

另一个替代方案是使用BG纹理玩弄技巧并在飞机上渲染具有不同透明度的技巧，但是获得分类可能比它的价值更麻烦。最简单的方法是将飞机（不透明）渲染到渲染目标，然后将天空绘制到常规帧缓冲区，然后将飞机复合到它上面。只需要一个画布，如果需要渲染具有不同透明度的多个项目，则可以重新使用该渲染目标来构建图像。