How can I use GLTFLoader?

Hi, i’m trying to load a scene

function GLTFScene({ gltfUrl }) {
  const object = useMemo(() => new GLTFLoader().load(gltfUrl), [gltfUrl])
  return (
    <>
      {
        object &&
          <primitive object={object} position={[0,0,0]}/>
      }
    </>
  )
}

and my jsx

    <div className="main" style={{ color: '#172717' }}>
      <Canvas style={{ background: '#A2CCB6', height: "100vh", width: "100hw" }} camera={{ position: [0, 0, 1000] }}>
        <ambientLight intensity={0.5} />
        <spotLight intensity={0.5} position={[300, 300, 4000]} />
        <GLTFScene gltfUrl={url} />
      </Canvas>
    </div>

And i’m getting img path error, i’ve tried to import the same gltf file in threejs editor and works fine. Anyone who has done this before can helpme. Thanks in advance

[dellwatson]

Never used gltf before, but seems to work if i take out the mesh: https://codesandbox.io/s/xvvn4vxqnz

Not sure right now why it doesnt work if i just put the scene into primitive object={…}

it doesn’t work again right now, the codesandbox also shows nothing after i click.

I currently facing this problem, not sure why, im new to 3 and it doesn’t load anything, still blank with GLTFLoader

[drcmda]

From how it looks to me you load something, but there’s no callback to give you the thing that you want to load, whenever its ready. But if the fetch request itself errors out, then your path is probably wrong, too.

here’s one example using svgloader: https://codesandbox.io/s/v8439q295l?from-embed

and the docs for gltf loader: https://threejs.org/docs/index.html#examples/loaders/GLTFLoader

it says loader.load(url, callback), so maybe something like this …

const [gltf, set] = useState()
useMemo(() => new GLTFLoader().load(url, set), [url])

return gltf ? <primitive object={gltf.scene} /> : null

If i understand docs correctly, load will end up calling the “set” method with the gltf object as the first argument. And that re-renders the component.