Responsivo

Talvez você tenha temido este momento, mas é hora de tornar nosso site responsivo!

Agora, precisamos recriar tudo o que fizemos para a versão desktop, mas para dispositivos móveis!

Brincadeira 🤭, vamos usar algumas técnicas para fazer nossa cena 3D ficar boa em dispositivos móveis.

Gostaria de destacar que não existe uma solução perfeita para tornar uma cena 3D responsiva. Isso depende de muitos fatores:

• A complexidade da cena
• O número de elementos
• Desempenho
• O que você deseja alcançar

Para a parte de CSS, vamos tornar nosso site responsivo com facilidade usando media queries.

useMobile

Usaremos duas técnicas para tornar nossa cena 3D responsiva:

• Alterar a posição base e a escala dos itens com base na largura disponível. Após um determinado limite, mudaremos para uma versão móvel.
• Ajustar com precisão a posição e a escala dos itens com base em um scaleFactor. Nossa cena parece perfeita em uma tela de 1980px, mas e em uma tela de 1600px? Usaremos um scaleFactor para ajustar a posição e a escala dos itens, mantendo a mesma aparência.

Vamos criar um hook useMobile na pasta src/hooks para lidar com ambas as 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 o hook useState para armazenar os valores de scaleFactor e isMobile. Isso forçará uma re-renderização quando os valores mudarem.

Usamos duas constantes para definir a largura ideal que usamos para posicionar nossos itens e o limite para a versão móvel (quando mudamos para a versão móvel).

Escolhi não usar a config para essas variáveis para tornar este hook reutilizável em outros projetos.