使用@react-three/drei时useGLTF崩溃场景

Question

大家好，我这样做有点让我自己发疯，但我正在尝试设置一个简单的three.js场景，但是当我尝试使用@react-three/drei中的useGLTF函数时，场景崩溃了，我的控制台说：

Warning: meshopt_decoder is using experimental SIMD support

The above error occurred in the <ForwardRef(Canvas)> component:

    at Canvas (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1630506543315:10124:3)
    at div
    at Layout (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1630506543315:502:23)
    at Home
    at wrappedComponent (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1630506543315:457:73)
    at wrappedComponent (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1630506543315:457:73)
    at ErrorBoundary (http://localhost:3000/_next/static/chunks/main.js?ts=1630506543315:764:47)
    at ReactDevOverlay (http://localhost:3000/_next/static/chunks/main.js?ts=1630506543315:880:23)
    at Container (http://localhost:3000/_next/static/chunks/main.js?ts=1630506543315:8865:5)
    at AppContainer (http://localhost:3000/_next/static/chunks/main.js?ts=1630506543315:9361:24)
    at Root (http://localhost:3000/_next/static/chunks/main.js?ts=1630506543315:9500:25)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

THREE.WebGLRenderer: Context Lost.

我的react场景如下所示：

import React, { Suspense } from 'react'
import { Canvas } from '@react-three/fiber'
import Layout from '../components/layout'
import { Sky, OrbitControls, useGLTF } from '@react-three/drei'

const Skull = () => {
  const { nodes, materials  } = useGLTF('skull.gltf')
  console.log(nodes)

  return (
    <Suspense fallback={null}>
      <mesh geometry={nodes.mesh_0.geometry} />
    </Suspense>
  )
}

export default function Home() {
  return (
      <Layout>
        <Canvas>
          <Sky sunPosition={[0, 1, 0]} />
          <Skull />
          <OrbitControls />
        </Canvas>
      </Layout>
  )
}

和我的包：

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@material-ui/core": "^4.12.3",
    "@material-ui/lab": "^4.0.0-alpha.60",
    "@react-three/drei": "^7.5.0",
    "@react-three/fiber": "^7.0.6",
    "add": "^2.0.6",
    "axios": "^0.21.1",
    "mobx": "^6.3.2",
    "mobx-react": "^7.2.0",
    "next": "11.1.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "sass": "^1.38.2",
    "three": "^0.132.2",
    "three-stdlib": "^2.4.0",
    "yarn": "^1.22.11"
  },
  "devDependencies": {
    "esbuild-loader": "^2.15.1",
    "eslint": "7.32.0",
    "eslint-config-next": "11.1.2"
  }
}

我不知道这是怎么回事，控制台错误的描述性不够，让我无法理解。有没有什么明显的步骤我在这里漏掉了？

谢谢!

Answer 1

我最终找到了一种让一切正常工作的方法。我必须添加一个调用来预加载gltf文件，然后一切都运行正常。我更新了我的默认组件，如下所示：

export default function Home() {
  useGLTF.preload("skull.gltf")
  return (
      <Layout>
        <Canvas>
          <Sky sunPosition={[0, 1, 0]} />
          <Skull />
          <OrbitControls />
        </Canvas>
      </Layout>
  )
}

在此之后，我在加载场景时没有遇到错误，一切都按预期进行。