1

大家好，我有点把自己逼疯了，但我正在尝试设置一个简单的 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"
  }
}

我无法弄清楚这里发生了什么，并且控制台错误的描述性不足以让我理解。我在这里缺少一些明显的步骤吗？

谢谢！

4

1 回答 1

0

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

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

在此之后，我加载场景没有任何错误，一切都按预期工作。

于 2021-09-02T13:36:13.823 回答