Giters

jlengstorf / gatsby-react-three-fiber-demo

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Model keeps loading multiple times

robertocinetto opened this issue · comments

commented

Hi!
I've noticed that this code has a problem. It keeps loading and re loading the 3d model. You can see it by yourself if you open devsTool and take a look at the network tab.

This doesn't happen in Paul's version. But Paul write that in a simple React app and if i tried his code on my Gatsby application i get an error like

index.js:2177 Error: Model3D suspended while rendering, but no fallback UI was specified.

Add a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.
    in Model3D (at model.js:198)
    in Canvas
    at throwException (react-reconciler.development.js:12323)
    at handleError (react-reconciler.development.js:13423)
    at performSyncWorkOnRoot (react-reconciler.development.js:13144)
    at react-reconciler.development.js:1802
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority (react-reconciler.development.js:1752)
    at flushSyncCallbackQueueImpl (react-reconciler.development.js:1797)
    at flushSyncCallbackQueue (react-reconciler.development.js:1785)
    at scheduleUpdateOnFiber (react-reconciler.development.js:12584)
    at Object.updateContainer (react-reconciler.development.js:15851)
    at render (web.js:471)
    at web.js:937
    at commitHookEffectList (react-dom.development.js:22029)
    at commitLifeCycles (react-dom.development.js:22079)
    at commitLayoutEffects (react-dom.development.js:25343)
    at HTMLUnknownElement.callCallback (react-dom.development.js:337)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:386)
    at invokeGuardedCallback (react-dom.development.js:441)
    at commitRootImpl (react-dom.development.js:25081)
    at unstable_runWithPriority (scheduler.development.js:697)
    at runWithPriority$2 (react-dom.development.js:12150)
    at commitRoot (react-dom.development.js:24921)
    at finishSyncRender (react-dom.development.js:24328)
    at performSyncWorkOnRoot (react-dom.development.js:24306)
    at react-dom.development.js:12200
    at unstable_runWithPriority (scheduler.development.js:697)
    at runWithPriority$2 (react-dom.development.js:12150)
    at flushSyncCallbackQueueImpl (react-dom.development.js:12195)
    at flushSyncCallbackQueue (react-dom.development.js:12183)
    at scheduleUpdateOnFiber (react-dom.development.js:23708)
    at dispatchAction (react-dom.development.js:17075)
    at ResizeObserver.callback (web.js:63)
    at later (index.js:27)

Suspense is can't be used in Gatsby cause it's not supported by ReactDOMServer. How do you fix this? Thanks!

commented

Try adding a Suspense component and fallback component prop high up like so:

    <Canvas>
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <Box position={[-1.2, 0, 0]} />
      <Box position={[1.2, 0, 0]} />
      <Suspense fallback={null}>
        <Earth position={[3.2, 0, 0]} />
      </Suspense>
    </Canvas>

I guess some feature you're using might be using Suspense like useLoader from RTF.

commented

Finally, got Suspense to work with r3fs useLoader/useGLTF.. within Gatsby.

Steps

  1. Upgrade to react and react-dom ^17.0
  2. Render the Canvas only on clientSide
  3. Nest Suspense inside the canvas (This lets you use a loader with r3f's Html as fallback)
  4. Lazy import a wrapper component for all the canvas children

const isSSR = typeof window === 'undefined'

Pseudo

...
{ isSSR
  ? null
  : <Canvas>
      ....lights, controls etc

      <React.Suspense fallback={<Loader />}>
        <LazyCanvasContent content={children} />
      </React.Suspense>
    </Canvas>

LazyCanvasContent

const LazyCanvasContent = React.lazy(() => import("../Content"))

Content.jsx

export default ({ content }) => (
  <group name='CanvasContent'>
     {content}
  </group>
)

Loader.jsx

export default () => {
  const { progress } = useProgress()
  return (
    <Html center>
      <p>{progress}% loaded</p>
    </Html>
  )
}

hope that helps somebody down the road..