Model does not show

[fnick851]

Here is the model in question: light_bulb.zip (copyrighted model)
The model is purchased from here: https://sketchfab.com/3d-models/light-bulb-eb5adbcc5a2747d6be80e196405645f6

I'm trying to get this model displayed on a blank canvas following this tutorial: https://blog.logrocket.com/configure-3d-models-react-three-fiber/, but it does not show anything. And there isn't any error so I'm having a hard time figuring out what is missing.

Here is a reproduction: https://codesandbox.io/s/lightbulb-r3f-gcw1cv. The <LightBulb /> component is generated with gltfjsx.

Could someone take a look? A sandbox with this model displayed correctly would be appreciated.

[drcmda]

you're not telling the gltfloader about the paths it has to find the textures and binaries in. useLoader(GLTFLoader, url, loader => loader.setPath(..... but it's generally not a good idea to use gltf on the web, use glb's. gltfjsx has a transform option that makes you one: npx gltfjsx model.gltf --transform these are a lot smaller and everything's stored in one file. blender could also export a glb, but gltfjsx will also reduce the textures in size which helps a lot.

btw the path is wrong, too. ./... denotes a relative path under /src. you can't fetch from a relative path because /src does not exist, it is virtual in the bundlers eyes and in production it is gone completely. /foo/bar.gltf would be correct.

[fnick851]

Thanks!

But for the path, I think './../" indicates a path relative to the served URL, not the /src folder right? The path in useGLTF does not go through webpack or any bundler compilation. So it shouldn't be relative to /src folder. It should be relative to the URL where the index.html is being served:

You see the network request is pointing at the correct path.

[fnick851]

@drcmda
I updated the sandbox to use the transformed .glb file. I also tried change the path. But it still does not show.

[fnick851]

@drcmda
Do I need to use useLoader for loading .glb file too?
If glb is the preferred format why we have a useGLTF hook? When should one use useGLTF? And is there a way to achieve the equivalent of useLoader(GLTFLoader, url, loader => loader.setPath(... using useGLTF?

[fnick851]

@drcmda For what it's worth, I tried importing both the .gltf and .glb file into Blender and they do not show either. I must missed something in the model / or the model has some issue.

[drcmda]

theres only gltfloader, usegltf abstracts that and sets up draco/meshop for decompression. gltfloader loads both gltf and glb. but you should only use glb on the web. as for ./ just saying, most people assume if they have a file inside /src that ./file.ext loads it because they import that way. i always liked / for public, ./ for relative local files, easy to remember, hard to mess up.

[fnick851]

It turned out it was loading the model indeed. But the model has some issues or special stuff going on. It is invisible.
I tried this model instead https://sketchfab.com/3d-models/incandescent-light-bulb-217c6b059c584243893b36ab76472ddd and it worked.