Per posizionare e animare la camera in una scena 3D, abbiamo scoperto alcuni modi per farlo:

• Impostazione manuale della posizione e rotazione della camera.
• Utilizzo di diversi tipi di controlli, come OrbitControls.

Ma a volte, abbiamo bisogno di un maggiore controllo sulla camera, e richiede molto codice e calcoli per farlo correttamente. Fortunatamente, ci sono librerie che possono aiutarci in questo.

Quella che useremo si chiama camera-controls. È una piccola libreria che ci consente di eseguire una varietà di movimenti e animazioni della camera molto facilmente.

Per fortuna, Drei ha un wrapper per questa libreria, quindi possiamo usarla con poche righe di codice.

Progetto iniziale

Per scoprire le diverse funzionalità di questa libreria, creeremo un bel slider 3D per mostrare il nuovo iPhone 15 Pro Max Black.

Contattami quando verrà rilasciato l'iPhone 16 così posso aggiornare questa lezione 🤭

Il progetto iniziale contiene:

• Modello Apple iPhone 15 Pro Max Black di polyman. Licenziato sotto Creative Commons Attribution.
• Un componente UI contenente uno slider realizzato con Tailwind CSS che aggiungeremo successivamente al progetto.

Per ora possiamo vedere solo il modello dell'iPhone

Iniziamo a giocare con i controlli della camera.

Controlli

Per abilitare i controlli della camera, dobbiamo sostituire gli OrbitControls già presenti nel progetto iniziale con il componente CameraControls da Drei.

Aggiungeremo anche un riferimento al controllo in modo da poterlo accedere successivamente e utilizzare i suoi metodi.

Experience.jsx:

Copy
// ...
import { CameraControls } from "@react-three/drei";
import { useRef } from "react";

export const Experience = () => {
  const controls = useRef();
  return (
    <>
      <CameraControls ref={controls} />
      {/* ... */}
    </>
  );
};

Invece di un riferimento, ora puoi accedere al componente CameraControls con l'hook useThree da react-three-fiber. Maggiori informazioni nella documentazione.

Facendo ciò, non possiamo notare alcuna differenza sostanziale con gli OrbitControls. Possiamo comunque ruotare, traslare e zoomare la camera.

L'API ha anche molti controlli in comune come distance, zoom, polarAngle, azimuthAngle, ...

Dove il componente CameraControls risplende è quando vogliamo animare la camera.

Non esamineremo tutti i controlli disponibili, ma vedremo i più comuni. Puoi trovare l'elenco completo nella documentazione dei camera-controls.

Dolly

Il controllo dolly ci permette di muovere la camera avanti e indietro.

Usiamo Leva per aggiungere pulsanti per muovere la camera avanti e indietro:

Copy
// ...
import { button, useControls } from "leva";

export const Experience = () => {
  // ...

  useControls("dolly", {
    in: button(() => {
      controls.current.dolly(1, true);
    }),
    out: button(() => {
      controls.current.dolly(-1, true);
    }),
  });
  // ...
};

Il primo argomento del metodo dolly è la distanza con cui vogliamo muovere la camera. Il secondo argomento è un boolean che indica se vogliamo animare il movimento oppure no.

La nostra camera ora può muoversi avanti e indietro

Se volessimo ottenere lo stesso risultato con gli OrbitControls, dovremmo calcolare la nuova posizione della camera e del target. Successivamente, dovremmo animare la camera e il target verso le loro nuove posizioni.

Truck

Il controllo truck ci permette di muovere la telecamera su, giù, a sinistra e a destra senza cambiare l'orientamento della telecamera.

Come abbiamo fatto con il controllo dolly, aggiungiamo i pulsanti per sperimentare il controllo truck:

Copy
// ...

export const Experience = () => {
  // ...
  useControls("truck", {
    up: button(() => {
      controls.current.truck(0, -0.5, true);
    }),
    left: button(() => {
      controls.current.truck(-0.5, 0, true);
    }),
    down: button(() => {
      controls.current.truck(0, 0.5, true);
    }),
    right: button(() => {
      controls.current.truck(0.5, 0, true);
    }),
  });
  // ...
};

I primi due argomenti del metodo truck sono le distanze orizzontale e verticale che vogliamo muovere la telecamera. Il terzo argomento è un booleano che indica se vogliamo animare il movimento o meno.

Puoi usare diversi valori per le distanze orizzontale e verticale per muovere la telecamera in diagonale.

Ruota

I controlli della fotocamera forniscono un modo per ruotare programmaticamente la fotocamera attorno al suo obiettivo, come il movimento che facciamo quando trasciniamo il mouse con gli OrbitControls.

Aggiungiamo dei pulsanti per ruotare la fotocamera attorno al suo obiettivo:

Copy
// ...

export const Experience = () => {
  // ...
  useControls("rotate", {
    up: button(() => {
      controls.current.rotate(0, -0.5, true);
    }),
    down: button(() => {
      controls.current.rotate(0, 0.5, true);
    }),
    left: button(() => {
      controls.current.rotate(-0.5, 0, true);
    }),
    right: button(() => {
      controls.current.rotate(0.5, 0, true);
    }),
  });
  // ...
};

Gli argomenti del metodo rotate sono:

• azimuthAngle: l'angolo orizzontale in radianti.
• polarAngle: l'angolo verticale in radianti.
• enableTransition: un booleano che indica se vogliamo animare il movimento o meno.

Tempo fluido

Per controllare il tempo dell'animazione quando usiamo l'argomento enableTransition, possiamo utilizzare la proprietà smoothTime.