Load GLTF model in next.js / Error: Could not load <url> response.body.getReader is not a function

[alex-frx]

How to load a model GLTF model in next.js?

I spend hours looking for this. Nothing works :(

---

What I tried so far:

• use different loaders ( useLoader(GLTFLoader,url) / useGLTF(url) and some more
• wrap the component in a next/dynamic component / dont do it
• solve the errors related to suspense not beeing support by installing next with react 18
• tried this starter template
• use three-stdlib
• tried to write a custom loader in next.config.js

read every issue and forum post i could find on tis issue

---

The error i get at the moment is:

Server Error
Error: Could not load  <url> response.body.getReader is not a function

with a component looking like this:

import React from 'react'
import { useGLTF } from '@react-three/drei'
import { Canvas, } from '@react-three/fiber'
import { Suspense } from 'react/cjs/react.production.min';

export default function Spinner({ ...props }) {
  const model = useGLTF("http://localhost:3000/spinner.glb")
  return (
    <Suspense fallback={"loading"}>
      <Canvas
        camera={{ position: [1, 1, 1] }}
      >
        <primitive object={model.scene} />
        <color attach="background" args={["hotpink"]} />
      </Canvas>
    </Suspense>
  )
}

---

package.json:

  },
  "dependencies": {
    "@react-three/drei": "^7.27.3",
    "@react-three/fiber": "^7.0.21",
    "axios": "^0.24.0",
    "next": "^12.0.7",
    "react": "^18.0.0-beta-24dd07bd2-20211208",
    "react-dom": "^18.0.0-beta-24dd07bd2-20211208",
    "three": "^0.135.0",
    "three-stdlib": "^2.6.1"
  },
  "devDependencies": {
    "eslint": "8.4.1",
    "eslint-config-next": "12.0.7",
    "file-loader": "^6.2.0"
  }
}

node-version:

16 LTS

[drcmda]

this is just about the path, i dont think that http://localhost:3000/spinner.glb is correct. the model has to be inside the public folder and the path is most likely just /spinner.glb. useGLTF is correct. you could useLoader(GLTFLoader, url) but GLTF is more complex than that, useGLTF takes care of setting up some extensions like draco and meshopt.

as for suspense, i think you'd need to ask next, suspense is a standard react fature since 16.4, if they dont support that it would be kind of weird.

[alex-frx]

@drcmda the path should be right fine. nextjs want absolute paths - if i change it either nextjs complains or I get a 404.

the suspense thing is fixed so it has to be something different

[drcmda]

http://localhost:3000/spinner.glb points towards a port on your local machine. i don't see how that could work. loading a glb and loading an image is the same thing, you're just dealing with a standard browser fetch request, this is what THREE.GLTFLoader does internally with the url you give it. it either has to be /file.ext or /public/file.ext, or however that is configured in next.

here is someone that experiences the same problem on stackoverflow: https://stackoverflow.com/questions/54436021/nextjs-public-folder

and next docs: https://nextjs.org/docs/basic-features/static-file-serving

[CodyJasonBennett]

This shouldn't be executed on the server-side. I'd retry next/dynamic but turn SSR off for this component. Real-time stuff should live on the client and three relies on quite a few browser APIs.

import dynamic from 'next/dynamic'

const Spinner = dynamic(
  () => import('./Spinner'),
  { ssr: false }
)