当使用@react-three/drei时，使用egltf崩溃场景

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.

我的反应是这样的:

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

在此之后，我没有错误加载场景和一切工作如预期。