CSS Gradient Background not appearing behind Three JS animation

Questions
1

I’m playing with this example:

(the code is here: three.js/examples/webgl_points_dynamic.html at bc58fecba18150103b95fbde5aaa3cc7cddf95a7 · mrdoob/three.js · GitHub)

And I’m just trying to add a gradient background to it using CSS.

The gradient appears in a flash, but then immediately gets painted over and remains black the rest of the way. (I do see the THREE JS animations throughout.)

It seems this bit of code may be causing the problems, cause it’s doing more “painting” of its own beyond what the regular renderer is doing:

composer = new EffectComposer(renderer);
	composer.addPass(renderModel);
	composer.addPass(effectBloom);
	composer.addPass(effectFilm);
	composer.addPass(effectFocus);
	composer.addPass(outputPass);

I tried this:

renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setClearColor(0x000000, 0); // 0 alpha for full transparency

And then this in my render() function:

composer.render(0.01);

I’ve set the scene.background to transparent/clear - nothing works.
I’ve tried doing things in the CSS, the HTML, the javascript - all sorts of combos - nothing works.

Is there just no way around this?

Ultimately I want the gradient background to change over time, so that’s another level of complexity.

2

Try setting up the renderer with alpha: true

renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );