0

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

ig10
  • 56
  • 5

2 Answers2

0

It should be just this:

const renderer = new THREE.WebGLRenderer( { alpha: true } );
mrdoob
  • 19,334
  • 4
  • 63
  • 62
  • Yeah I have that still doesn't work in my case specifically. ``` const renderer = new THREE.WebGLRenderer({ antialias: false, alpha: true }); ``` – ig10 Aug 06 '22 at 01:50
0

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?

Shai Ghelberg
  • 31
  • 4
  • Seems like this could be the issue, I tried adding target to the composer and everything but nope. I might have to consider another way I believe :s. Thank you for ur response. – ig10 Aug 08 '22 at 23:32