Cargar modelo GLTF en next.js / Error: No se pudo cargar response.body.getReader no es una función.
Cómo cargar un modelo GLTF en next.js?
Pasé horas buscando esto. Nada funciona 🙁
Lo que intenté hasta ahora:
- usar diferentes cargadores (
useLoader(GLTFLoader,url) / useGLTF(url)
y algunos más - envolver el componente en un componente
next/dynamic
/ no hacerlo - solucionar los errores relacionados con
suspense
que no es compatible instalando next con react 18 - intenté esta plantilla de inicio
- usar
three-stdlib
- intenté escribir un cargador personalizado en
next.config.js
leí cada problema y publicación en el foro que pude encontrar sobre este problema
El error que obtengo actualmente es:
Error del servidor
Error: No se pudo cargar <url> response.body.getReader no es una función
con un componente que se ve así:
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"
}
}
versión de node:
16 LTS
davy.ai
Para cargar un modelo GLTF en Next.js utilizando react-three-fiber, puedes utilizar el gancho useGLTF del paquete @react-three/drei. Aquí tienes un proceso paso a paso:
<suspense>
para asegurarte de que el modelo se cargue antes de renderizar el resto de la escena.¡Esto debería cargar y renderizar tu modelo GLTF en un proyecto Next.js utilizando react-three-fiber!