Loading .glb models dynamically from JSON - GLTFLoader.js parse error

[jonportelli]

Hey everyone, I am trying to dynamically load different .glb models from a JSON file but hit a dead end with this console error;

SyntaxError: Unexpected token < in JSON at position 0 at Object.parse (<anonymous>) at GLTFLoader.parse (GLTFLoader.js:97) at Object.onLoad (GLTFLoader.js:57) at XMLHttpRequest.

I assume this error is because it's checking for old models with .json extension?

Here is my pseudo code https://codesandbox.io/embed/gltfplanet-json-error-et91t?file=/src/index.js

I would be very grateful If anyone could point me in the right direction or has examples of loading models from a local store or url.

[drcmda]

the path is wrong. resources doesnt exist from what i see and even if it did, you cant use urls like that.

either:

import img from "./resources/img.jpg"

useLoader(..., img)

and "resources" really has to exist in your /src folder,

or everything has to be in the public folder. this is because bundlers only bundle what is required. what isnt wont be part of the output bundle.

i would also suggest running the glb through gltfjsx again. the $__ stuff is outdated.

here's a working example: https://codesandbox.io/s/r3f-ibl-envmap-simple-p5zf9

[jonportelli]

Hey Paul,

Thanks so much for the speedy reply and for creating such as awesome project as R3F!

I should have explained that my sandbox was copied and adapted from a local version of the GltfPlanet.js demo and not configured for running in codesandbox.
GLTFJSX is very useful but was looking for simplest way to load any .glb from a data store as configuring materials etc isn't required.

I got my models loading from a JSON by adapting your sandbox. The way in which the DracoLoader is used seems to have made all the difference.

Here is the working codesandbox.
https://codesandbox.io/s/r3f-ibl-envmap-simple-dynamic-model-loading-wz7mp

[drcmda]

the sandbox that you forked had gltfjsx create that $__ stuff. the simplest way of showing a gltf is

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

you dont need to check scene or nodes against null, because if it cant load it will crash (catch with ErrorBoundaries), otherwise the result is guaranteed to be there.

if you do use gltfjsx, and really it just creates that graph, nothing else, it doesnt alter the gltf in any way, then you even have types for nodes, materials, etc

[jonportelli]

That's great Paul ! Thanks for clarifying those points.