Exported glb/gltf model doesn't look similar like I have in blender

Hi, Can someone help me with this?

My imported gltf/glb model doesn’t look exactly the same like I have in the blender. I’m not able to understand why it is happening. Did I not export it correctly from blender? Did I need any specific configuration to add on three js?

Here is my model that I’m working with -
final continents4.glb (989.6 KB)

This is my code sample -

import { AmbientLight,	 Color, PerspectiveCamera, Scene,	 sRGBEncoding, WebGLRenderer } from 'three';
import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

let scene: Scene,
	camera: PerspectiveCamera,
	renderer: WebGLRenderer,
	controls: OrbitControls;
    // composer:EffectComposer;
const loader = new GLTFLoader();

const loadGLTF = () => {
	// lowilds_planet
	// https://firebasestorage.googleapis.com/v0/b/bossnet-dev.appspot.com/o/test-scene.glb?alt=media&token=073e0ace-4da7-4fd8-9cd3-7056f409c6ca
	loader.load('./../../src/assets/verge3d/final continents4.glb',async (gltf: GLTF) => 
        (error: any) => console.log(error)

const animate = () => {
    // composer.render();  
	renderer.render(scene, camera);

const init = () => {

	scene = new Scene();
	scene.background = new Color(0x353535);
	// scene.fog = new FogExp2( 0xcccccc, 0.002 );

	camera = new PerspectiveCamera(75, 2, 0.1, 1000);
	// camera.position.x = -7.35;
	camera.position.y = 20;
	// camera.position.z = -4.95;

	// lights
	const light: AmbientLight = new AmbientLight(0xffffff, 1);
	// light.position.set(4.07, 1.005, 5.9);
	renderer = new WebGLRenderer({ antialias: true });
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.outputEncoding = sRGBEncoding;
	// renderer.shadowMap.enabled = true;
	renderer.physicallyCorrectLights = true;
	// renderer.shadowMap.type = PCFShadowMap;
	const element = document.getElementById('threejs-container') as HTMLDivElement;

	controls = new OrbitControls(camera, renderer.domElement);
	controls.target.set(0, 0, 0);
	controls.enableDamping = true;
	controls.dampingFactor = 0.05;



window.addEventListener('resize', function () {
	camera.aspect = window.innerWidth / window.innerHeight;
	renderer.setSize(window.innerWidth, window.innerHeight);


That’s how it looks in three js -

And that’s how it looks in a blender -

Am I missing any shading configuration in three js? Or, the exported model missing any shading configurations. I’ve searched a lot but didn’t find any solutions. Please help!!!

I think we can’t avoid this problem. Only one method is to control the environment of the scene manually, I think. This is only my opinion and I wish this will help your work.
Thanks. Kind Regards.

Hey, @Man, thanks for your response, but how can we manually control the environment of the scene?

Can you elaborate on this more with any examples? It would be really helpful.

Yeah. It is available for control the scene manually to meet the same effect.
Have you some experience in interior design or other 3D software design?
If you have some experience in 3D max and interior design, you will know that difference effects fade along the different v-ray settings with same mapping and lighting.
It is the same with this. There are many factors effecting to scene such as mapping, lighting(direct light and ambient light) and environment settings.
So the only method for the same effect is manual controlling by strict say.
I.e. controlling the light or material and something like that.
Anyway it needs only effort by your self, This is sense problem so I’m sorry I can’t explain in detail.

Loading a model doesn’t bring with it all of the lighting, exposure, post-processing, and renderer features that exist in Blender. There’s generally no way around needing to set those up in three.js, if three.js is your viewing engine.

In this case in particular you might just want to use tone mapping and reduce the exposure by a notch or two.

renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 0.5;

Hey, @donmccurdy, I tried what you suggested and added the tone mapping with exposure, still, the scene is not the same. Reducing the exposure caused a little change in the ocean layer to be similar to the blender but the light exposures are still the same.

How does it affect lights also? Is there any method to handle the light exposure the same as mapping or do I need to do it manually? Can you suggest any example so I can handle the lights?

Also, do I need to change any settings for the lights on the blender or my exporting configuration which can help me to achieve a scene similar to the blender?


I don’t know of one-size-fits-all settings that will make arbitrary scenes look the same as they do in Blender. You will probably need to tweak lights, exposure, tone mapping, and perhaps more in three.js. Usually I do not try to export lights from Blender, but set up lights in three.js myself.

Thanks, @donmccurdy I’m also thinking to try to export the model without lights and set it up myself, then handle lights, exposure, tone mapping and other stuff. Still, if I find any other solution for that will post it here.

Hey, @donmccurdy @Man guys, one more help with my use cases.

What I’m trying to achieve is something similar like google Maps does. Like, after certain level of zooming google maps shows the name of the cities. Again, after certain zoom level it shows the name of places.

In my model, I want after certain zoom level I want to show some text labels over the continents. Which will again show more texts on zooming again.

Also, after certain zoom level I want to load a building over the continents and on click of any building camera should move towards them and focus into that building.

Lazy loading the model something like dynamic asset loading.

Do you guys think I can achieve these use cases with Three js? Can we have any example related to that in Three js? Or what concept should I look into to achieve this with Three js?

It would be really helpful, if someone can help me with this. Thanks!

Hello. Sorry for my late reply.
I think It is not difficult to be implemented by three.js.
Simply, the problem of fading the label of continents along the zoom level can be solved with the distance between the camera and globe(i.e.) and the problem of moving camera toward the point where mouse clicked can be implemented by RayCaster and camera rotation on sphere coordinate.
Anyway, it depends on your effort. I wish your effort will get a success.

@Man What about dynamic asset loading? How can we dynamically load other models onto one model like here loading buildings over the continents? Do we have any elaborating example about this?

There are so many examples of this. You can find them a lot.
Explaining simply, you can load all models in the beginning and control their visibility along the zoom level.

@Krishna_Vishwakarma I guess you need to bake the texture and scene in blender to get the same result. That should solve your issue.