Three.js Why renderer with viewport & scissor and I have a complete black canvas

Question

I have a typical UI - two vertical windows. The left for the canvas & renderer, the right for the UI.

Inside this UI I will have special viewers, for example a simple top view window.

I have used the viewports && scissors approach. All works fine.

The question is that I miss some special parameter to avoid the complete canvas black-filled that covers all I have (my UI) behind. I expected that viewport & scissors were going to let me have 'clean' areas (not filled) inside my canvas. But not....

The alpha approach ( renderer = new THREE.WebGLRenderer( { alpha: true } );) could be the fix but I don't know if this is the best solution (what about performance) or is there any way to program (enhancement) something related with the viewport & scissors.

If I'm going to use viewports there is no sense to fill all with black.

(Also the main question is ... If I have a viewport & scissor, why and who fill the canvas with black ?)

Answer 1

It is totally okay to use this:

var renderer = new THREE.WebGLRenderer({ alpha: true }); 

It is a common approach as you can read also here in this answer

You can change only the color like this:

renderer.setClearColor( 0xffffff );