Blender .fbx model looks flat when imported in three.js

I spent days in sculpting a perfect model using blender. I exported it in .fbx format so as to preserve the rigging and other properties. But when I load it in threejs it just looks flat like this.

Please help…

This is the code:
const ambientLight = new THREE.AmbientLight(0xffffff, 0.1)

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.1)
directionalLight.castShadow = true
directionalLight.shadow.mapSize.set(1024, 1024) = 15 = - 7 = 7 = 7 = - 7
directionalLight.position.set(5, 5, 5)

// ground-------------------------------
const ground = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
ground.rotation.x = - Math.PI / 2;
ground.receiveShadow = true;
scene.add( ground );

const grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
grid.material.opacity = 0.2;
grid.material.transparent = true;
scene.add( grid );

const loader = new FBXLoader()
loader.load( ‘/t1.fbx’, function ( object ) {
console.log(‘Model adding…’)
object.traverse(function (child) {
if ( child instanceof THREE.Mesh ) {
child.castShadow = true;
child.receiveShadow = true;
object.position.y = 3
object.castShadow = true
object.rotation.y = Math.PI/8
console.log(‘object is…’,object)

}, undefined, function ( error ) {

console.error('this is error...', error );


const canvas = document.querySelector(‘.webgl’)
const renderer = new THREE.WebGLRenderer({
antialias: true
renderer.setSize(sizes.width, sizes.height)
renderer.outputEncoding = THREE.sRGBEncoding
renderer.shadowMap.enabled = true
renderer.render(scene, camera)

@Mugen87 Please help here,
Thanks in advance.

Does the model look alright if you open it in any model viewer (ex. here) ?

Wdym by depth? How does the model look in Blender?

It does seem to look similar - the 2 differences I can see is a) background in the model viewer is gray, not white; b) shadows are set up a bit better.

Try adding CSM shadows and set scene.background = new Three.Color(0xeeeeee) - it should look comparable :thinking:

Any idea how to get similar result @mjurczyk ?

Could you share a .blend, not screenshots?

Appearance is a combination of materials and lighting. Not all Blender materials export. Lighting should be assigned in three.js. Good appearance will often require more than just an ambient and directional light, and THREE.RoomEnvironment is a nice plate to start:

1 Like

Let me know if something is missing in my blender file also…

It looks like many meshes in the blender scene do not have materials set up. Colors and lighting are going to be mostly undefined in that case. Generally you’ll want to use Principled BSDF materials in Blender for export. The lighting changes are also important, the appearance can be very different in Blender too, depending on what lighting you choose there:

But it’s best to set the lighting up in three.js, that doesn’t tend to export easily from Blender.

Okay got it, so I can set the materials for all meshes to BSDF and then set the lightings separately in three.js?

Yes, Principled BSDF is the one to use. See Import & Export of Node Shaders — Blender Manual.


This works! Thanks @donmccurdy I learned a lot! :smile: