Setting Background Colour for glass material with transparent background

[jamesmackenzie1999]

Hi there,

I’m modeling a glb object with transparent material onto a transparent background so that I can use the div’s background colour so that it changes as the user scroll’s through the site.
When I remove the background from Three.js, the material automatically reflects black, although the background colour I’m working with are white and quite bright, so the reflection comes off unrealistic.

Is there a way to set this background colour even though I want it to be transparent?
I’ve tried renderer.setClearColour but that hasn’t helped.

Thanks so much!

James

[mayyar]

Hi , did you try to set alpha to true in webglrenderer?

[jamesmackenzie1999]

Hey, Yup I did in this bit of code below:

renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
renderer.shadowMap.enabled=true;
renderer.setClearColor(0xffffff,0)

And here is the material properties that show as transparent when using a threejs background:
acrylicMaterial.reflectivity = 0
acrylicMaterial.transmission = 1
acrylicMaterial.roughness = 0.2
acrylicMaterial.metalness = 0
acrylicMaterial.clearcoat = 0.3
acrylicMaterial.clearcoatRoughness = 0.25
acrylicMaterial.color = new THREE.Color(0xffffff)
acrylicMaterial.ior = 1.2
acrylicMaterial.thickness = 1.0

But the clear material still reflects black as in the photo?

Thanks for your help.

[mayyar]

@jamesmackenzie1999

Hey, Yup I did in this bit of code below:

mmm, so you have to check your css code
check if your body background is white and your canvas background is white too

[mayyar]

@jamesmackenzie1999

But the clear material still reflects black as in the photo?

In fact before all you have to check the emmisive and set it to 0xffffff