Responsive

Peut-être redoutiez-vous ce moment mais il est temps de rendre notre site web responsive !

Maintenant, nous devons recréer tout ce que nous avons fait pour la version de bureau, mais pour mobile !

Je plaisante 🤭, nous allons utiliser certaines techniques pour que notre scène 3D soit belle sur mobile.

J'aimerais souligner qu'il n'existe pas de solution parfaite pour rendre une scène 3D responsive. Cela dépend de nombreux facteurs :

• La complexité de la scène
• Le nombre d'éléments
• Les performances
• Ce que vous voulez accomplir

Pour la partie CSS, nous rendrons facilement notre site web responsive avec des media queries.

useMobile

Nous allons utiliser deux techniques pour rendre notre scène 3D responsive :

• Changer la position de base et l'échelle des éléments en fonction de la largeur disponible à notre disposition. Après un certain seuil, nous passerons à une version mobile.
• Affiner la position et l'échelle des éléments en fonction d'un scaleFactor. Notre scène est parfaite sur un écran de 1980px mais qu'en est-il d'un écran de 1600px ? Nous utiliserons un scaleFactor pour ajuster la position et l'échelle des éléments afin de conserver le même aspect visuel.

Créons un hook useMobile dans un dossier src/hooks pour gérer les deux techniques :

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,
  };
};

Nous utilisons le hook useState pour stocker les valeurs de scaleFactor et isMobile. Cela forcera un re-render lorsque les valeurs changeront.

Nous utilisons deux constantes pour définir la largeur parfaite que nous avons utilisée pour positionner nos éléments et le seuil mobile (quand nous passons à la version mobile).

J'ai choisi de ne pas utiliser la config pour ces variables afin de rendre ce hook réutilisable dans d'autres projets.