Problem loading model with useGLTF() vs useLoader()

Questions
,
1

Hello, I’m new to 3JS and r3f and loving it so far.

I created this wall with a few windows in Blender and exported as .glb file.

EE
EE892×660 40.8 KB

So, I used https://gltf.pmnd.rs/ to create a React component. This is the preview shot from the website.
image
When I used the component in my own project it looked like this. I’m not sure why. I have tried multiple light sources (ambient, directional, hemisphere), the Window border is the same material as the wall and the side windows’ blue frame material is the same as the center window.

image

But when I use useLoader() to load the .glb file rather than useGLTF(), it looks okay in my project.
image

Has anybody dealt with this problem? I’m pretty new to Blender as well so maybe something is wrong with my model. I will continue using useLoader() for now, but it annoys me that I can’t figure it out.

Thanks!

2

This issue does happen with the pmndrs gltf convertor, the issue is not cause of the lightning but instead of the material texture.

I face the same issue and the easy fix is to set the texture to THREE.DoubleSide, that should fix the issue if it’s still there or if you are confused on how to fix it, attach your model and snippet and I’ll fix it

3

Thanks for the reply!

That seems to do the trick.