Responsivo

Forse temevi questo momento, ma è tempo di rendere il nostro sito web responsivo!

Ora dobbiamo ricreare tutto ciò che abbiamo fatto per la versione desktop, ma per i dispositivi mobili!

Sto scherzando 🤭, useremo alcune tecniche per far sembrare la nostra scena 3D bella anche sui dispositivi mobili.

Vorrei sottolineare che non esiste una soluzione perfetta per rendere una scena 3D responsiva. Dipende da molti fattori:

• La complessità della scena
• Il numero di elementi
• Le prestazioni
• Cosa vuoi ottenere

Per la parte CSS, renderemo il nostro sito responsivo facilmente con le media queries.

useMobile

Utilizzeremo due tecniche per fare in modo che la nostra scena 3D sia responsiva:

• Cambiare la posizione di base e la scala degli elementi in base alla larghezza disponibile a nostra disposizione. Dopo una certa soglia, passeremo a una versione mobile.
• Affinare la posizione e la scala degli elementi in base a un scaleFactor. La nostra scena appare perfetta su uno schermo da 1980px, ma che dire di uno schermo da 1600px? Useremo un scaleFactor per regolare la posizione e la scala degli elementi per mantenere lo stesso aspetto e sensazione.

Creiamo un hook useMobile in una cartella src/hooks per gestire entrambe le tecniche:

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

Stiamo usando l'hook useState per memorizzare i valori di scaleFactor e isMobile. Questo forzerà un re-render quando i valori cambiano.

Usiamo due costanti per definire la larghezza perfetta che abbiamo usato per posizionare i nostri elementi e la soglia mobile (quando passiamo alla versione mobile).

Ho scelto di non usare la config per queste variabili per rendere questo hook riutilizzabile in altri progetti.