2

Hi everyone I'm kind of driving myself crazy with this, but I am trying to set up a simple three.js scene, however when I try to use the useGLTF function from @react-three/drei the scene crashes, and my console says:

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.

My react scene looks like this:

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

And my packages:

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

I can't figure out what is going on here and the console errors are not descriptive enough for me to understand. Is there some obvious step I am missing here?

Thanks!

Robert Sims
  • 31
  • 4
  • the component that has the usegltf hook has to be within suspense. this most definitively has nothing to do with preload, and preloading like that, inside the component is not good. – hpalu Sep 05 '21 at 10:12

1 Answers1

1

I was eventually able to figure out a way to get everything to work. I had to add a call to preload the gltf file and then everything ran okay. I updated my default component to look like this:

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

After this I got no errors loading the scene and everything worked as intended.

Robert Sims
  • 31
  • 4