Gatsby, React-Three-Fiber persistent canvas accross pages?

Questions
,
1

Currently I have my three-fiber component visible on two pages, where I conditionally display them under gatsby-browser.js, wrap page content. So that when being routed across pages, I dont reload the entire scene. It doesnt take long as its not complex, but is still not good ux.

I am interested in a better way to keep the animation persistent, and load the component on website load, regardless of where I enter the website.

export const wrapPageElement = ({ element, props }) => {
  return <Layout {...props}>{element}</Layout>
}

where my Layout component, loads another component that contains the 3d scene (Hero).

const Layout = props => {
    return (
        <Hero style={shouldDisplayHero? {} : {display: 'none'}}></Hero>
    )
}

The display none, shows up abruptly and I am unable to apply css animations, as the some inline css being applied to the canvas div overloads class definitions (especially height)

I am sorry if I am really new and trying to learn, thanks in advance.

2

I don’t know much about Gatsby but your canvas is just a component, just like your routes. Place routes within the canvas and you can exchange contents, like so: https://codesandbox.io/embed/r3f-basic-demo-forked-byc2c?file=/src/App.js&codemirror=1

This would also allow you to animate changes, not in css but right in your scene, material opacity or group scale.

Small caveat, if your routing solution is context based read this: https://github.com/pmndrs/react-three-fiber/blob/6514b1d442ce915aa4ee0281ba17b8960c6487b3/api.md#gotchas

3

Hmm… Gatsby Pages have seperate files, index.js for index.html … about.js for /about… and so on.

Would the route element work just the same way in my Layout.js?

4

i have never really used gatsby, you might find better advice on their forums since it’s a pretty generic issue.