#Next.js persist canvas on navigation

4 messages · Page 1 of 1 (latest)

candid bay
#

Hey, i don’t have access to my code right now but i cant get this issue out of my mind. Yesterday i tried adding my fiber canvas with a plane shader background to rootLayout in my next App dir project. I wrapped layout with a wrapper file consisting of the canvas, hoping this would cause my canvas to not rerender on navigation. Had no success after fiddling for a few hours. Anyone that has had a similar issue or can point me to some good examples that achieve this?

vast fox
# candid bay Hey, i don’t have access to my code right now but i cant get this issue out of m...

For me it works without issues. I can even add a transition when switching pages using AnimatePresence from Framer Motion. Could you share the repository or the relevant part? The code runs inside Canvas.```js
import { AnimatePresence } from 'framer-motion';
import { motion } from 'framer-motion-3d';

import { Scenes } from '@/3d/Scenes';
import { usePathname } from '@/i18n/routing';

export default function MainScene(props) {
const pathname = usePathname();

const Scene = Scenes[pathname];
if (!Scene) return null;
return (
<AnimatePresence>
<motion.group
key={pathname}
initial={{ scale: 0 }}
animate={{ scale: 1 }}
exit={{ scale: 0 }}
transition={{ duration: 0.5 }}
>
{Scene}
</motion.group>
</AnimatePresence>
);
}And here is the component I use in rootLayout,i use dynamic to reduce the initial load:js
import dynamic from 'next/dynamic';

const Canvas = dynamic(() => import('@/components/3d/'), { ssr: false });
function Layout3d(props) {
return (
<>
<div className="fixed flex top-0 left-0 inset-0 w-full h-screen ">
<Canvas />
</div>
</>
);
}

export default Layout3d;

candid bay
#

I will check this and provide some code when i get home to my PC 🙏🙏 @vast fox

vast fox
#

should persist if canvas is in root layout