Clearcolor alpha renders scene very dark

Questions
,
1

I have a scene with a cube using meshphysicalmaterial. I need the scene background to be transparent. However doing so by using setClearColor’s alpha to 0, renders the scene very dark. Here is a comparison between transparent and non-transparent backgrounds:

[Album] imgur.com

As far as i understand this has to do with the fact that when the renderer draws the scene, it doesn’t draw it on top of a color. I tried setting a color on the mesh, and also playing around with the lighting, however i’m unable to recreate the same look as without the background.

Here’s the mesh settings:

const plastic = new THREE.MeshPhysicalMaterial({ 
   color: 0x121212,
   roughness: 1, 
   transparent:true,
   opacity:0.7,
   reflectivity: 1,
   metalness:0,
   ior: 1,
   sheen: 1,
   transmission: 1,  
   thickness: 0.1,
   envMap: mapTexture,
   envMapIntensity: 2,
   clearcoat: 1,
   iridescence: 1,
   iridescenceIOR:1

   

 });

Here’s the init with the renderer, camera, etc.

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

const sceneA = new THREE.Scene({background: 0xff0000});
renderer.setClearColor( 0x121212, 0);
const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000 );

const light = new THREE.DirectionalLight(0xffffff, 10);
light.position.set(0, 5, 10);

const Alight = new THREE.AmbientLight( 0x121212,1 );
2

It may have something to do with the transmission. If it is set to 0, there should be no problem with how bright the object is (but this will obviously destroy the glassyness).

Maybe using transparency and opacity can do part of the trick, but they will not produce the exact feel of transmission.

Why do you need a transparent background? Do you have the canvas over other HTML elements and you want to see them through the canvas?

3

Yeah, transmission and a transparent canvas do not mix at the moment. I’m not sure what can be done about that.