Setting Background Colour for glass material with transparent background

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!


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

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 } );

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.

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

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