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

Questions
1

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)
   
    useFrame((state,delta)=>{
           mesh.current.rotation.x += delta * 0.5 
           mesh.current.rotation.y = delta * 0.3 
            
    
            
    })
  
    const mypic = useLoader(TextureLoader,'skill/mecompress-min.png')   
  
    
      return(
      
      <>
      
      
      
      
      <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
           
  
        
         
         />
         
    
       </mesh>
       
       
   
      
       
       
       </>
       )
  
  
   
  }
  


const AboutmeboxCanvas = ()=>{
    return(<>
    
    
    
    <Canvas  >

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

 <Suspense fallback={<CanvasLoader />}>

      <OrbitControls enableZoom={false} />
       <Aboutmebox/>

 </Suspense>


 <Preload all />
</Canvas>  
    
    
    </>)
}


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

image

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

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