When I Click another Three.js component, the default one disappears

when I click on another Three.js component, the default one (AboutmeboxCanvas ) disappears. I want to keep the default AboutmeboxCanvas component visible even when interacting with other Three.js components. I am using nextjs 13.

my code here:

function Aboutmebox(){
    const mesh =  useRef(null)
           mesh.current.rotation.x += delta * 0.5 
           mesh.current.rotation.y = delta * 0.3 
    const mypic = useLoader(TextureLoader,'skill/mecompress-min.png')   
      <mesh  ref={mesh}   >
        <boxGeometry args={[3.5, 3.5, 3.5]}
         <meshStandardMaterial  map={ mypic}
           roughness={0.2} // Adjust roughness to make the surface less rough (0 to 1)
           metalness={0.7} // Control the metalness of the material (0 to 1)
           transparent={false} // Set transparency as needed

const AboutmeboxCanvas = ()=>{
    <Canvas  >

<hemisphereLight intensity={2} />
<ambientLight  intensity={1}/>
 <directionalLight position={[0,0,0.5]}/>

 <Suspense fallback={<CanvasLoader />}>

      <OrbitControls enableZoom={false} />


 <Preload all />

export default AboutmeboxCanvas

then I am showing it to my page where I am also showing others three js elements

my page.js

export default function About() {....
     return (
   <> <AboutmeboxCanvas />   <MySkillCanvas/> an so on

The error I am sseing from console


  1. Please format the code properly.
  2. Make sure you’re not creating too many <Canvas /> elements - browser will eventually lose it’s patience and start disposing existing canvases to accommodate space for the new ones.

generally you should only have 1 canvas, even across routes. like mj said, the browser will kill your tab. browsers have an arbitrary limit and if that’s reached it starts closing contexts.

if you need a hint for how to keep threejs alive throughout route changes in nextjs check out GitHub - pmndrs/react-three-next: React Three Fiber, Nextjs, Tailwind and Styled-components starter but you you can easily do this yourself without templates like that.

1 Like