CODEWITHSUNDEEP
javascriptthree.jstransparency
user3112634
user3112634

Reputation: 693

Changing three.js background to opacity .5

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!

Upvotes: 0

Views: 1581

Answers (1)

Mugen87
Mugen87

Reputation: 31076

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/

Upvotes: 2

Related Questions