Strange dark scene


One image is better than long talk to show my question.

On left my result on right the same glb file open in the Three Editor.
Both with the same ligting basic setup.
One ambient and one directional with identical values.
As you see my result is darker and i dont find why.

i obviously miss something or do something wrong.

i have try to strip my project to a minimal setup.
This sample are able to load only a glb file by drag and drop.
The sample project: (90.0 KB)
My sample glb file used in the picture is to big (almost 9 mo) to upload here :frowning:
But i think you can test with any glb file.


Have you this line in your app?

renderer.outputEncoding = THREE.sRGBEncoding;

nop …

So, i have add it in the constructor and now the result is similar to the Three Editor
Great, thx a lot.

where we can find this info ?
do other renderer setup is needed to know ?

There is no guide for color space conversion yet.

That depends on your use case. E.g. configuring tone mapping could be relevant, too.

Um, this is not correct since outputEncoding is not a WebGL context parameter. The code should exactly look like what I have shared.

When i say contructor i talk about the app constructor where i declare the renderer with all the other stuff

here the renderer with the new line added:

this.renderer = new THREE.WebGLRenderer( { antialias:true } );
this.renderer.outputEncoding = THREE.sRGBEncoding;
this.renderer.setPixelRatio( window.devicePixelRatio );
this.renderer.setSize( this.viewportPanel.offsetWidth, this.viewportPanel.offsetHeight );
this.viewportPanel.appendChild( this.renderer.domElement );

1 Like

Ok, i found where it is setup in the Three Editor.
Lighting, shadow, tone mapping and so on.

Sorry i was not deeply read the code before asking obvious question :slight_smile:
Thanks for pointing me about the renderer, this help me a lot in my learning.

1 Like