Rendered 3D models look different than in threejs.org/editor

Questions
,
1

Hello :slight_smile:

I am new to three.js. I used threejs.org/editor to create the setting I want for my scene, but when rendering, the result is not the same - I’m not sure if it’s something with the renderer setting/ shadows/ contrast… The only light I want to use is HemisphereLight:

const scene = new THREE.Scene();
const hemisphereLight = new THREE.HemisphereLight(0xB1B5CD, 0x988F86, 2);
hemisphereLight.position.set(0, 10, 0);

scene.add(hemisphereLight);

Editor:

Screenshot 2023-03-29 at 14.36.17
Screenshot 2023-03-29 at 14.36.17702×878 184 KB

Result:

Screenshot 2023-03-29 at 14.36.09
Screenshot 2023-03-29 at 14.36.09666×662 28 KB

2

There may be various reasons why it looks different, depending on your code. With colour differences, usually the first thing to try is probably setting renderer.outputEncoding to sRGBEncoding (docs.)

3

I have that one set and also tried playing around with toneMapping but none of them gave me the result I want :confused:

4

maybe different renderer.outputEncoding

5

The ones I found did not work.

6

Just compare renderer settings, lights etc.

7

I went through everything I could find but all of them seem the same. This is my function for creating the renderer, maybe you spot something I can’t:

const renderer = new THREE.WebGLRenderer({ canvas: canvas3D.nativeElement, alpha: true, preserveDrawingBuffer: true });

renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.toneMapping = THREE.NoToneMapping;

return renderer;
8

Can u send json file of scene
image

9

Incase you are rendering blender or maya model in scene try this code.
and in renderer add this param “antialias: true,”


        const renderer = new THREE.WebGLRenderer({antialias: true, 
        preserveDrawingBuffer: true});
        const environment = new RoomEnvironment();
        const pmremGenerator = new THREE.PMREMGenerator(renderer);
        scene.environment = pmremGenerator.fromScene(environment).texture;

        renderer.toneMapping = THREE.ACESFilmicToneMapping;
        // renderer.toneMappingExposure = 0; set it accordingly to your scene
        renderer.outputEncoding = THREE.sRGBEncoding;
        renderer.textureEncoding = THREE.sRGBEncoding; 
        renderer.shadowMap.enabled = true;
        renderer.physicallyCorrectLights = true;
10

Is there a reason you’re setting preserveDrawingBuffer to true in the renderer?