Three.js 整个对象的 alpha

Three.js alpha on entire object

我正在创建 Three.js 包含多个 Collada 对象的场景。我希望能够从 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 场景的 canvas 上设置不透明度实现了屏幕截图底部显示的内容,但是当有多个 collada 对象时,这变得不切实际,因为每个新对象都需要单独 scenes/canvases。

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

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

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