What is the precise method for replicating the lighting of a 3D model in Blender?

Hi. I have loaded a gltf model from blender to threejs but the lights are not showing correctly. Please can someone advice me what I am doing wrong.
This is how it supposed to be the earth from blender.

And this is how it shows on threejs.

This is how I am adding the lights in 3d model:

	// lights
	const ambientLight = new THREE.AmbientLight(0xffffff);
	scene.add(ambientLight);
	const directionalLight = new THREE.DirectionalLight(0xffffff ,0.6);
	scene.add(directionalLight);

Please share the glTF asset in this topic.

I am attaching the gltf file with google drive because is larger than 8MB.

@Mugen87

I can’t tell if this is a difference in lighting, or if the materials are different. Since this model is very large and difficult to examine in a 3D viewer, would you mind sharing both a source .blend and .gltf for only a small part where you have questions? You can hide the rest of the scene before exporting, for example, or create a separate .blend.

@donmccurdy I’m facing lighting issues in the full scene.
I can provide a video of how it should look


As evident from the attached screenshot, one specific issue with the lighting pertains to the Earth object.

We can’t know what lighting you’ve put in Blender, because you have not shared that file… Your scene appears to have bloom effects and more, which are not going to export to any format. Furthermore, lighting rarely exports as expected from Blender, unless you are very careful about which lighting features you use, and adjust exposure appropriately in three.js, both of which are complex topics without well-established solutions at the moment.

I would suggest starting by getting your materials looking as expected in three.js, under simple neutral lighting. That the planet is a completely different color in Blender vs. three.js is a red flag to me.

You would then need to set up the final lighting (emissive, bloom, etc.) in three.js, not in Blender.

Should I create additional materials? I only loaded the 3D model, and this is what appeared. Please excuse my lack of knowledge; I’m new to Three.js, so I may ask basic questions. @donmccurdy

Please, share your .blend file, or a subset of the file if it’s too large and/or private. :slight_smile:

WeTransfer - Send Large Files & Share Photos Online - Up to 2GB Free @donmccurdy :slight_smile:

Unfortunately, I think the main problems are going to be these material and effect settings in Blender:


Screenshot 2023-06-07 at 12.43.17 PM

None of that can be exported to any format, it displays only in Blender. You’ll need to set up your materials to match the glTF exporter guidelines, using solid or texture inputs to the Principled BSDF material. There’s no point in enabling effects in Blender, as those would need to be recreated in three.js.

Oh so do I have to create all the materials and textures in Three.js because they are not included in the glTF file? @donmccurdy

Materials and textures can be created in Blender, but only if they follow the guide above. Essentially you need a Principled BSDF material with textures and values connected directly to it. Creating more complex node-based shaders (as many Blender users do when they’re not exporting the result…) will not work for export.

Thanks so much for your response! Really appreciated!