CODEWITHSUNDEEP
three.jsopacityalphacollada
John
John

Reputation: 55

Three.js alpha on entire object

I am creating Three.js scenes that contain multiple Collada objects. I would like to be able to set the opacity of each Collada object from within Three.js (so that the objects can dissolve in and out of the scene as needed).

I am able to set the opacity of the individual materials within the object, but this produces a rather strange and undesirable effect:

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.)

What I am looking for is the ability to set the opacity on the whole collada object (effectively, render it, then set the opacity), as shown in the bottom of the attached screenshot.

I achieved what's shown in the bottom of the screenshot, by setting the opacity on the canvas that contains the Three.js scene, but this becomes impractical when there's more than one collada object, since it would require individual scenes/canvases for each new object.

enter image description here

Upvotes: 2

Views: 1769

Answers (1)

bjorke
bjorke

Reputation: 3305

Actually, it sound slike what you are asking for is the opacity of the final rendered image of your object, on top of a background (after all, you're not seeing through the engine to the fuselage -- those are opaque TO EACH OTHER).

For this, the best route is probably to use THREE EffectComposer and render targets for the BG and FG elements. Then those images can be easily blended. Look at the THREE render-to-texture samples.

Another alternative is to play tricks with the BG texture and render THAT with varying transparency, over the airplane, but getting that sorted might be more trouble than it's worth. The simplest course is to render the aircraft, opaque, to a render target, and then draw the sky to the regular frame buffer, and then composite the airplane over it. Just the one canvas, and if you need to render multiple items with varying transparency, you can re-use that render target to build up the image.

Upvotes: 4

Related Questions