Блог

Всем привет, я немного схожу с ума от этого, но я пытаюсь создать простую three.js сцена, однако, когда я пытаюсь использовать функцию useGLTF из @react-three/drei, сцена выходит из строя, и моя консоль говорит:

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

Я не могу понять, что здесь происходит, и ошибки консоли недостаточно описательны, чтобы я мог их понять. Есть ли какой-то очевидный шаг, который я здесь упускаю?

Спасибо!

В конце концов я смог найти способ заставить все работать. Мне пришлось добавить вызов, чтобы предварительно загрузить файл gltf, а затем все прошло нормально. Я обновил свой компонент по умолчанию, чтобы он выглядел так:

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

После этого я не получил никаких ошибок при загрузке сцены, и все работало так, как задумывалось.