Estoy trabajando en un sitio web que, por ahora, solo tiene un texto y un logotipo 3D flotante a la derecha. El caso es que cuando estoy viendo el objeto, la animación se ejecuta a 60 fps y el sitio web funciona sin problemas, pero cuando no estoy viendo el objeto, el sitio web tiene mucho retraso y no se puede usar, así que quería saber por qué. que pasa y como puedo solucionarlo.

Aquí está mi código:

índice.js

 <div className={styles.logo}> <Suspense fallback={null}> <Canvas gl={{antialias: true, powerPreference: 'high-performance'}} dpr={[0.8, 1.8]}> <Logo /> <Environment background={false} files="/images/env2.hdr" near={1} far={1000} resolution={256} /> </Canvas> </Suspense> </div>

logotipo.js

 export default function Logo({ ...props }) { const group = useRef() const { nodes, materials } = useGLTF('/images/RB_Maquillaje_2-transformed.glb') useFrame((state) => { const t = state.clock.getElapsedTime() group.current.position.y = Math.sin(t) * 0.2; group.current.rotation.y = Math.sin(t / 1.5) / 15 }) return ( <group ref={group} {...props} dispose={null}> <motion.mesh initial={{scale: 0}} animate={{scale: 1}} transition={{duration: 0.5, type: 'spring', stiffness: 200, damping: 20}} geometry={nodes.BezierCurve004.geometry} material={materials['Material.001']} rotation={[0, -0.2, 0]} position={[0, -0.2, 1]} /> </group> ) } useGLTF.preload('/images/RB_Maquillaje_2-transformed.glb')