Responsivo

¡Tal vez temías este momento pero es hora de hacer nuestro sitio web responsivo!

Ahora necesitamos recrear todo lo que hicimos para la versión de escritorio, ¡pero para móvil!

Es broma 🤭, usaremos algunas técnicas para que nuestra escena 3D luzca bien en dispositivos móviles.

Me gustaría resaltar que no hay una única solución perfecta para hacer que una escena 3D sea responsiva. Depende de muchos factores:

• La complejidad de la escena
• La cantidad de elementos
• Rendimiento
• Lo que deseas lograr

Para la parte de CSS, fácilmente haremos que nuestro sitio web sea responsivo con media queries.

useMobile

Usaremos dos técnicas para hacer que nuestra escena 3D sea responsiva:

• Cambiar la posición base y la escala de los elementos según el ancho disponible a nuestra disposición. Después de un cierto umbral, cambiaremos a una versión móvil.
• Ajustar finamente la posición y escala de los elementos basándonos en un scaleFactor. Nuestra escena luce perfecta en una pantalla de 1980px pero, ¿qué pasa con una pantalla de 1600px? Usaremos un scaleFactor para ajustar la posición y escala de los elementos para mantener la misma apariencia.

Vamos a crear un hook useMobile en una carpeta src/hooks para manejar ambas técnicas:

Copy
import { useState } from "react";

const REFERENCE_WIDTH = 1920;
const MOBILE_THRESHOLD = 990;

export const useMobile = () => {
  const [scaleFactor, setScaleFactor] = useState(
    window.innerWidth / REFERENCE_WIDTH
  );
  const [isMobile, setIsMobile] = useState(
    window.innerWidth <= MOBILE_THRESHOLD
  );
  return {
    scaleFactor,
    isMobile,
  };
};

Estamos usando el hook useState para almacenar los valores scaleFactor e isMobile. Esto forzará un re-renderizado cuando los valores cambien.

Usamos dos constantes para definir el ancho perfecto que usamos para posicionar nuestros elementos y el umbral móvil (cuando cambiamos a la versión móvil).

Opté por no usar el config para esas variables para hacer que este hook sea reutilizable en otros proyectos.