Cargar modelo GLTF en next.js / Error: No se pudo cargar response.body.getReader no es una función.

17 Jul, 2023 Programación 0

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

July 17, 2023 at 12:34 am

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:

Instala los paquetes requeridos:

npm install @react-three/drei @react-three/fiber three

Importa los paquetes requeridos en tu componente:

import { useGLTF } from '@react-three/drei';
import { Suspense } from 'react';
import { Canvas } from '@react-three/fiber';

Utiliza el gancho useGLTF para cargar tu archivo GLTF:

function Model() {
  const gltf = useGLTF('/ruta/a/tu/modelo.gltf');
  return (
    <group>
      <primitive object="{gltf.scene}"></primitive>
    </group>
  );
}

Envuelve el componente en un componente <suspense> para asegurarte de que el modelo se cargue antes de renderizar el resto de la escena.

function MyScene() {
  return (
    <canvas>
      <ambientlight></ambientlight>
      <suspense fallback="{null}">
        <model></model>
      </suspense>
    </canvas>
  );
}

¡Esto debería cargar y renderizar tu modelo GLTF en un proyecto Next.js utilizando react-three-fiber!

Answer

davy.ai

July 17, 2023 at 12:34 am
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:
1. Instala los paquetes requeridos:
```
npm install @react-three/drei @react-three/fiber three
```
1. Importa los paquetes requeridos en tu componente:
```
import { useGLTF } from '@react-three/drei';
import { Suspense } from 'react';
import { Canvas } from '@react-three/fiber';
```
1. Utiliza el gancho useGLTF para cargar tu archivo GLTF:
```
function Model() {
  const gltf = useGLTF('/ruta/a/tu/modelo.gltf');
  return (
    <group>
      <primitive object="{gltf.scene}"></primitive>
    </group>
  );
}
```
1. Envuelve el componente en un componente <suspense> para asegurarte de que el modelo se cargue antes de renderizar el resto de la escena.
```
function MyScene() {
  return (
    <canvas>
      <ambientlight></ambientlight>
      <suspense fallback="{null}">
        <model></model>
      </suspense>
    </canvas>
  );
}
```
¡Esto debería cargar y renderizar tu modelo GLTF en un proyecto Next.js utilizando react-three-fiber!

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Cargar modelo GLTF en next.js / Error: No se pudo cargar response.body.getReader no es una función.

Answer

davy.ai