如何正确使用 drei useGLTF

Question

我想我正在关注react-3文档和许多其他示例，但无法让drei useGLTF像其他人一样工作。

我有一个简单的、从头开始的 Next|React|react- Three/Fiber 项目。我只是想加载示例宇航员并显示它。

我相信下面的代码实际上可以完美运行一段时间。经过一些小的更改和撤消后，我想我回到了相同的代码，但现在不起作用。（我尝试过有或没有悬念。）

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

function Model() {
  const gltf = useGLTF('https://thinkuldeep.com/modelviewer/Astronaut.glb')
  return (<primitive object={gltf.scene} />)
}

export default function Home() {
  return (
    <div>
      {/* <Suspense> */}
        <Canvas>
          <ambientLight />
          <Model />
        </Canvas>
      {/* </Suspense> */}
    </div>
  )
}

这是控制台消息：

这是我的 package.json：

{
  "name": "cfgnext",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@react-three/drei": "^8.18.10",
    "@react-three/fiber": "^7.0.26",
    "next": "12.1.0",
    "react": "17.0.2",
    "react-dom": "^17.0.2",
    "styled-components": "^5.3.3"
  },
  "devDependencies": {
    "eslint": "8.11.0",
    "eslint-config-next": "12.1.0"
  }
}

从我读过的所有内容来看，这应该很简单。有人可以告诉我哪里出了问题吗？

蒂亚·比尔

Answer 1

我将 React、Fiber 和 Drei 更新到最新版本。这导致我原来发布的代码可以工作（使用反应中的 Suspense）。这是关于：悬念的改变。

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

function Model() {
  const gltf = useGLTF('https://thinkuldeep.com/modelviewer/Astronaut.glb')
  return (<primitive object={gltf.scene} />)
}

export default function Home() {
  return (
    <div>
      <Suspense>
        <Canvas>
          <ambientLight />
          <Model />
        </Canvas>
      </Suspense>
    </div>
  )
}

以下是我使用的版本：

{
  "name": "cfgnext-updated",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@react-three/drei": "^9.0.1",
    "@react-three/fiber": "^8.0.6",
    "next": "12.1.4",
    "react": "18.0.0",
    "react-dom": "18.0.0"
  },
  "devDependencies": {
    "eslint": "8.12.0",
    "eslint-config-next": "12.1.4"
  }
}