Video transparency with A-Frame and Three.js

Question

I'm forwarding this open issue from A-Frame Github page hoping that some people may know what's going on with this issue. It's still not working with A-Frame 1.0.3 and I don't really know where to search. There are two examples on the Github issue, one working with A-Frame 0.8.0 and the other one with A-Frame 0.9.0. There are absolutely no warnings or information in the javascript console so it's kinda hard to find where the issue can be.

On version 0.8.0 it used Three v90 and on 0.9.0 it used v101. So maybe something was made between these two versions on Three but I don't understand what.

Did anybody find a way to use videos with transparency on recent versions of A-Frame and/or Three.js ?

Thanks for your help :)

Answer 1

It seems that the assigned texture format doesn't have the alpha channel (THREE.RGBFormat, you can log and check the values here).

You can resolve the issue by changing the format of the video texture to THREE.RGBAFormat:

videoTexture.format = THREE.RGBAFormat

within a custom component containing a fix like this:

// wait until the material is ready
this.el.addEventListener('materialtextureloaded', e => {
   // grab the material
   let material = this.el.getObject3D("mesh").material;
   // swap the format
   material.map.format = THREE.RGBAFormat;
   material.map.needsUpdate = true;
})

working glitch here.