glTF missing geometry R3F

Hey,

Just wondering if anybody can help me. I’m using Next.js and React Three Fiber to display some custom models. I’ve tried exporting the model with a variety of different settings using different softwares. When I import the models into my scene they have no geometry. I am wondering if this is a loader issue or an export issue?

When I log the object to the console, there is no geometry node, compared to a .glb I found online that seems to be working in the same scene:

My object:

Parrot:

These are the versions I am using:
“next”: “9.2.1”,
“react”: “16.12.0”,
“three”: “0.112.1”
“react-three-fiber”: “4.0.12”

Are you able to load your glTF assets in viewers like:

https://sandbox.babylonjs.com/
https://gltf-viewer.donmccurdy.com/

Hey, thanks for your quick reply. I am indeed able to load them in viewers without any hassles

The second viewer in the list uses three.js. So there seems to be a problem with your app. Any chances to share a live example that demonstrates the issue?

Thank you and of course. In the meantime in the question I uploaded two screenshots comparing my model to the R3F glTF parrot, where my model (along with some others I tried) don’t have any geometry node

Hey this is the rough codesandbox https://codesandbox.io/s/silly-mendeleev-0sus4?file=/pages/birds.js
Birds is the page copied from the example and using the parrot object, custom is just a super simple export of a sphere .glb

that’s not how it works. the example was using gltfjsx (https://github.com/react-spring/gltfjsx). it extracts the scene-graph and it’s specific to the model. sphere.gtlf has another graph, it doesn’t fit.

all you need is this:

const { scene } = useLoader(GLTFLoader, url)
return <primitive object={scene} dispose={null} />

which is shorthand for (well, plus it uses suspense so you can manage async assets):

const [model, set] = useState()
useEffect(() => new GLTFLoader().load(url, set), [url])
return model ? <primitive object={model.scene} dispose={null} /> : null

you can look into gltfjsx if it interests you, it most certainly has advantages. but nothing in r3f should distract you from how threejs works. when in doubt, always do it like it’s written in the threejs docs.

PS. here’s a super simple sandbox that you can use to play around: https://codesandbox.io/s/r3f-drei-stats-8p4ph

2 Likes

Ah, thank you so much for that!!
if I didn’t walk away from these forums feeling stupid I wouldn’t be learning :slight_smile:

Thanks again!