How to pass GLTF JSON into useGLTF() to get the scene ?

[wdcs-kushaltanna]

I am facing an issue with dynamically rendering 3D object's GLTF JSON using the useGLTF() hook in a React component. Specifically, the examples provided with the useGLTF() hook show how to load GLTF data from a file path, but I am working with GLTF data that is obtained via an API call.

I would greatly appreciate any suggestions or solutions for loading GLTF data obtained from an API call with the useGLTF() hook. Thank you in advance for your help.

const generateResponse = async () => {
   API call().then((res) => {
          setGltfData(res.data);     // gltf data in state.
      }).catch((err) => setLoading(false));
  }
};

return (
  <>
        ....
        <button
           className="btn btn-light btn-lg w-100 mt-5 text-uppercase"
           data-start-loader
           type="button"
           onClick={generateResponse}
       >
           Generate Now {/* : Download Now */}
       </button>
       <div>
       <ThreeScene gltfData={gltfData} />        //component to render 3d object.
       </div>
       ....

// {gltfData} = props
const { scene } = useGLTF(gltfData);

return(
    <Canvas camera={{ position: [0, 4, 6] }}>
       <primitive object={scene} scale={0.09} position={[0, -2, 0]} />
       <OrbitControls enableZoom={false} />
    </Canvas>
)

[drcmda]

all loader hooks are abstractions around loader.load(url, cb), useGLTF is the same as new GLTFLoader().load(url, data => the only thing load accepts is a url https://threejs.org/docs/index.html?q=gltf#examples/en/loaders/GLTFLoader.load

you can use .parse which accepts an arraybuffer (not json). but you can't use useGLTF, make your own hook with the suspend-react library (for suspense integration), which is what all hooks use

import { suspend } from 'suspend-react'

function useGLTFAB(...) {
  return suspend(async () => {
    // Load the array buffer here
  }, [...])

imo there's no point in handling errors and loading states like you do, suspense was made for that in react and pretty much everything in fiber already uses it.