Can't load a .glb file with GLTFLoader

Questions
,
1

Hi, im using a React, React Three Fiber, Three.js and NextJs to build my application. Right now im in the testing phase of trying to figure out how R3F works. And the logical step is to load a model from a file.

However, i cant seem to make it work, i did a fair bit of googling around and i havent found anything that would solve my problem.

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

This is the error message i get. First thing i tried is opening the file in a different .glb viewer and the file worked there. I also tried a different file which also failed in my project.

I import GLTF loader like this:
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader'
I tried importing it from the jsm and the js folder, both end up with the same error

I import my .glb file like this:
import duck from '../public/Duck.glb'

And my loading code looks like this:

function Duck(props) {
    const gltf = useLoader(GLTFLoader, duck);
    return <primitive object={gltf.scene}/>
}

useLoader comes from:
import {Canvas, useFrame, useLoader} from "react-three-fiber"

Any idea what could be going wrong?

1 Like
2

This is the correct import since you want to use the module version of GLTFLoader.

From my experience, it’s hard to get answers to react-three-fiber related questions in this forum. You might have more luck by asking directly at the respective github repository.

3

i think this is related to the bundler (webpack, parcel, etc), not three or r3f. you can’t import a glb, there is no bundle-loader defined for that. unless you have a fallback loader which serves the URL. threes loaders are something else. the correct approach is to put the file into /public, then pass the string to the GLTFLoader.

1 Like
4

I ended up asking the same question the R3F page, https://spectrum.chat/react-three-fiber/general/having-trouble-loading-a-glb-file~d5820e79-5061-4241-938b-d1bd022e8aa6

I ended up fixing the issue by first, removing the import duck from "duck.glb" type of import. That clashes with webpack and it cant load a .glb file. So yeah the correct way is to keep it in a public folder and accessing it via URL string. However that ended up with a error of Cannot use import statement outside a module. The fix for that was to remove the import of GLTFLoader, and instead create a global variable called GLTFLoader and then in a useEffect hook, imort the GLTFLoader into that variable by using the require() method.

5

When I import the glb file using useGLTF, I got this error message

 ERROR  TypeError: image.data.slice is not a function (it is undefined), js engine: hermes
 LOG  EXGL: gl.pixelStorei() doesn't support this parameter yet!
 LOG  EXGL: gl.pixelStorei() doesn't support this parameter yet!

import { useGLTF } from "@react-three/drei/native";
import { Canvas } from "@react-three/fiber/native";
import React, { Suspense } from "react";

function Model(props: any) {
  const gltf = useGLTF(require('../../assets/models/fiesta_tea.glb'));
  return <primitive {...props} object={gltf.scene} />;
}

export default function ModelRenderer() {
  return (
    <Canvas>
      <ambientLight />
      <Suspense>
        <Model />
      </Suspense>
    </Canvas>
  );
}

Thsi is how I import the glb file.