Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Model keeps loading multiple times #2

Open
robertocinetto opened this issue May 14, 2020 · 2 comments
Open

Model keeps loading multiple times #2

robertocinetto opened this issue May 14, 2020 · 2 comments

Comments

@robertocinetto
Copy link

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!

@arthur-zhuk
Copy link

arthur-zhuk commented May 26, 2020

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.

@juanpprieto
Copy link

juanpprieto commented Dec 1, 2020

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..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants