将three.js背景更改为不透明度.5

Question

Ok So I am trying to make the background of the canvas/three.js to something that will be like opacity:.5 I can make it completely transparent with new THREE.WebGLRenderer( { alpha: true } );

but this isn't what I am looking for I want to be able to see behind the render(canvas background) so I can see the body/html of the page below but keep the objects in the render opacity:1 .

Any idea's? Thanks!

Answer 1

You can try to set the clear color and alpha value of the renderer like the following in order to have more control about how the background is rendered:

const renderer = new THREE.WebGLRenderer( { alpha: true } );
renderer.setClearColor( color );
renderer.setClearAlpha( 0.5 );

https://jsfiddle.net/vr648d3z/1/