Three.js 透明背景

Question

I know this might sound repeated, I googled it and found answers here about the background color such as this link ( Transparent background with three.js ), But that solution and some others did not work for my case.

I forked a codepen creation from someone else, and tried to adapt it to use it dynamically but I'm unable to remove the background even when setting alpha: true , setClearColor and scene.background = null into Scene instance.

I'm new in Three.js and I could not find the actual solution to my problem I've decided to post.

I tried debugging the camera angles thinking that might be the issue? - Still unsuccesful.

Here's a Codepen link so you can check it out (it starts at Line 141)

https://codepen.io/ig10/pen/JjLJNyX

Thank you

Answer 1

It should be just this:

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

Answer 2

As this comment suggests, the issue is with the composer. When I switch the composer.render() with renderer.render(scene, camera) I see the red background

So this is probably the correct duplicate: How do I stop EffectComposer from destroying my transparent background?