Rendered 3D models look different than in

Hello :slight_smile:

I am new to three.js. I used 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);




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.)

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

maybe different renderer.outputEncoding

The ones I found did not work.

Just compare renderer settings, lights etc.

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.outputEncoding = THREE.sRGBEncoding;
renderer.toneMapping = THREE.NoToneMapping;

return renderer;

Can u send json file of scene

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;

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