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