Hi guys, got everything working now except for the background gradient.
I read in the documentation, and from some other developers that when instantiating WebGLRenderer you can pass along “alpha:true”.
After that you should add renderer.setClearColor(0x000000, 0); to make the canvas be transparant so it shows your HTML background.
Unfortunately nothing happens when I do this.
Anyone here who knows the proper way of doing this?
Are you looking for something like this: https://jsfiddle.net/f2Lommf5/15331/
WebGLRenderer.setClearColor() is not necessary.
Thanks, I got it working now! will post my code later for reference
We’ve used this approach to render our animation with a simple gradient-background, but applying an UnrealBloomPass breaks this concept because the UnrealBloomPass-alpha is currently not being applied correctly with a transparent WebGLRenderer, see: Unreal Bloom and Renderer Transparency issue · Issue #14104 · mrdoob/three.js · GitHub
I guess this will be fixed in future releases.