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

Question

如何在 next.js 中加载模型 GLTF 模型？

我花了几个小时寻找这个。没有任何作用:(

到目前为止我尝试了什么：

使用不同的装载机（useLoader(GLTFLoader,url) / useGLTF(url) and some more
将组件包装在 next/dynamic 组件中/不要这样做
通过安装 next with react 18

suspense

尝试过this starter template
使用three-stdlib
试图在 next.config.js

阅读每个问题和论坛 post 我能找到关于这个问题的信息

我现在得到的错误是：

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

组件如下所示：

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"
  }
}

节点版本：

16 LTS

Answer 1

用父级包装模型组件并使用惰性导入解决了这个问题，例如

模型组件

import React from 'react'
import { useGLTF } from '@react-three/drei'

export default function Model() {
  const model = useGLTF("http://localhost:3000/spinner.glb")
  return (
     <primitive object={model.scene} />
  )
}

带有 lazy() 导入的场景组件

import { lazy, Suspense } from 'react'
import { Canvas, } from '@react-three/fiber'

const ModelComponent = lazy(() => import("./model"));

export default function Spinner({ ...props }) {
  return (
    <Suspense fallback={"loading"}>
      <Canvas
        camera={{ position: [1, 1, 1] }}
      >
        <ModelComponent />
        <color attach="background" args={["hotpink"]} />
      </Canvas>
    </Suspense>
  )
}

这个好像和SSR有关。 Next 中的 TextureLoaders 也有类似的问题，修复它也有类似的困难，最终通过 lazy() 导入找到了解决方案。我刚刚为模型加载尝试过，它工作正常。现在无法跟踪此原始线程，但会尝试跟踪并将其添加到此处。

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

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

reactjs

three.js

next.js

webgl

react-three-fiber