GLTFLoader works but textures all white from front (OK on back)

[neekfenwick]

Beginner here, using Three.js 0.176.0 (most recent?) for a week or two, having trouble taking a Sketchfab model from Blender and importing into a three.js scene using GLTFLoader. I have read around lots of forum threads and the most common problems seem to be missing lighting or environment map, so I have tried a few things to fix it.

First, the .gltf file looks find in the viewer at https://gltf-viewer.donmccurdy.com/ - see a copy of it at https://nickfenwick.com/Kitchen.glb - it is from Modern Kitchen 01 - Sketchfab - Download Free 3D model by MarMel-Bali [c36ec46] - Sketchfab and exported from Blender, making sure to include the Camera in the export.

I’ve also hosted the Blender file at https://nickfenwick.com/Kitchen.blend, but as the gltf renders OK in the online viewer I guess we don’t have to go back to Blender.

When viewed in a very simple three.js scene, the model appears all white - see minimal codepen at https://codepen.io/neekfenwick/pen/vEEezLr

What surprises me is that if you rotate the model to the back side, the wood textures etc show up. It looks like there’s something wrong with the lighting. I put in console.log statements in the codepen to log the camera and light positions in the scene after loading, and they look more or less OK to me:

Camera position: 147.6788330078125, 58.818458557128906, -34.7481689453125 iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js:1:4458
Found Blender light:
Object { isObject3D: true, uuid: “05d1310a-9de0-4a52-ae25-50c431cbd1a0”, name: “Light”, type: “PointLight”, parent: {…}, children: , up: {…}, position: {…}, rotation: {…}, quaternion: {…}, … }
Found Blender light:
Object { isObject3D: true, uuid: “bda270e5-7d45-4455-bac1-330f6de6e7f9”, name: “Point”, type: “PointLight”, parent: {…}, children: , up: {…}, position: {…}, rotation: {…}, quaternion: {…}, … }
Found Blender light:
Object { isObject3D: true, uuid: “904efc72-4d5a-47bf-b721-ca8313c6cf9c”, name: “Light”, type: “PointLight”, parent: {…}, children: , up: {…}, position: {…}, rotation: {…}, quaternion: {…}, … }
Found Blender light:
Object { isObject3D: true, uuid: “301e983e-dde9-44e6-900b-9abd62d0cae9”, name: “Point”, type: “PointLight”, parent: {…}, children: , up: {…}, position: {…}, rotation: {…}, quaternion: {…}, … }

I also tried adding my own lights (see the commented out code) but this did not help either.

In some desperation I’ve included an environment map from recommendations in another forum thread (see royal_esplanade_1k.hdr) which works fine but doesn’t solve the problem. You can remove that block of code from my pen to take the env map out of the picture.

Can someone shed some light on this please? (haha) I’d hate to have wasted the past few days.

[PavelBoytchev]

@neekfenwick

Can someone shed some light on this please?

Just shed the lights by a factor of 1000. They are too strong.

const gltf = await loader.loadAsync('https://nickfenwick.com/Kitchen.glb?aa');

gltf.scene.traverse( e=>{if(e.isLight) e.intensity *= 0.001} ); // <-added this
scene.add( gltf.scene );
//const clone = gltf.scene.clone(); // <-removed this
//scene.add( clone ); // <- and this

[neekfenwick]

Wow, thank you so much @PavelBoytchev it looks like my Blender light was set to 1000W - I have no idea where that came from, maybe the source model from Sketchfab.

I didn’t realise we could post screenshots here, so for completeness, here’s the scene before the fix, in my codepen:

And here with a similar fix to the one you suggested:

This is a huge relief, I was going crazy when the GLTF viewer showed the scene just fine.

[edit - I think someone called Rose also commented but I don’t see the comment any more to reply to it, but thank you anyway ]