React-three-fiber: How can I use GLTFLoader?

[LordOkami]

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

[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.

[drcmda]

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={...}

[LordOkami]

Thanks, it works fine!

[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

[Darkensses]

why isn't documentation to load correctly GLTF and DAE models?

[drcmda]

loaders are part of threejs jsm examples. there are dozens of them, each working a little different. you need to study threejs before you can use this lib b/c r3f is just a small reconciler for threejs itself.

[saurabhzuve]

This worked for me... But yeah I am new to every thing here and facing a lot of trouble understanding three.js and relating it with r3f :(

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

import { draco } from "drei";

export function Model(props) {
  const gltf = useLoader(GLTFLoader, "/samosaoasis.glb", draco());
  return gltf ? <primitive object={gltf.scene} /> : null;
}

[drcmda]

You don't need to check if gltf is undefined, suspense components are async. If useLoader has finished loading you will be able to use the results guaranteed, if the loading process has errors the component will crash and you catch it via error boundaries.

export function Model(props) {
  const { scene } = useLoader(GLTFLoader, "/samosaoasis.glb", draco());
  return <primitive object={scene} dispose={null} />
}