Theatre.js è una libreria di animazione javascript che ci permette di creare esperienze cinematografiche con Three.js e React Three Fiber.

La sua caratteristica principale rispetto ad altre librerie di animazione che abbiamo utilizzato finora è che viene fornita con un'interfaccia utente studio UI che ci consente di creare e modificare animazioni visivamente.

Dall'animazione di oggetti Three.js direttamente nello spazio 3D alla creazione di sequenze complesse con molteplici transizioni e funzioni di easing, Theatre.js ha tutto ciò di cui abbiamo bisogno per creare straordinarie transizioni 3D.

Per questa lezione, creeremo un sito web per una città medievale immaginaria. Utilizzeremo questo bellissimo modello Medieval Fantasy Book di Pixel.

L'animazione è parte del modello, lo manteniamo in autoplay per aggiungere un po' di vita alla scena.

Ho anche preparato l'interfaccia utente con TailwindCSS e Framer Motion per passare da una sezione all'altra del sito web.

Pronto a diventare il prossimo Steven Spielberg del web? Iniziamo!

Installazione

Per aggiungere Theatre.js al nostro progetto, esegui il seguente comando nel tuo terminale:

Copy
yarn add @theatre/core@0.5 @theatre/studio@0.5 @theatre/r3f@0.5

Poi, nel nostro codice, dobbiamo ottenere il sheet su cui lavoreremo per il nostro project. In App.jsx:

Copy
// ...
import { getProject } from "@theatre/core";

const project = getProject("MedievalTown");
const mainSheet = project.sheet("Main");

// ...

Il nome del progetto dovrebbe essere unico per evitare conflitti con altri progetti. Poiché Theatre.js utilizza localStorage per salvare i dati dell'animazione e spesso usiamo la stessa URL e porta del browser in fase di sviluppo, è importante utilizzare un nome univoco.

Il sheet è destinato ad animare uno o più oggetti nella scena. Useremo un solo sheet per questo progetto. Potresti considerare di usare più sheet se vuoi animare oggetti diversi in modo indipendente. Nel nostro caso, tutte le nostre animazioni hanno senso essere nello stesso sheet.

Infine, dobbiamo avvolgere tutti i componenti che verranno animati in un <SheetProvider>:

Copy
// ...
import { SheetProvider } from "@theatre/r3f";
// ...

function App() {
  // ...
  return (
    <>
      <UI
        currentScreen={currentScreen}
        onScreenChange={setTargetScreen}
        isAnimating={currentScreen !== targetScreen}
      />
      <Canvas camera={{ position: [5, 5, 10], fov: 30, near: 1 }} shadows>
        <SoftShadows />
        <SheetProvider sheet={mainSheet}>
          <Experience />
        </SheetProvider>
      </Canvas>
    </>
  );
}

export default App;

Ora è il momento di aggiungere l'editor visivo al nostro progetto.

Theatre.js Studio

Per aggiungere il Theatre.js Studio al nostro progetto, dobbiamo importarlo e inizializzarlo:

Copy
// ...
import extension from "@theatre/r3f/dist/extension";
import studio from "@theatre/studio";

studio.initialize();
studio.extend(extension);

// ...

Abbastanza semplice, vero? Ora, se esegui il tuo progetto, dovresti vedere l'interfaccia utente del Theatre.js Studio sul tuo schermo:

Editable

Per rendere un oggetto editable con Theatre.js e potervi interagire nel studio, dobbiamo importare il componente editable. In Experience.jsx:

Copy
// ...
import { editable as e } from "@theatre/r3f";
// ...

Usiamo editable as e per adattarci alla documentazione ufficiale. È un semplice shortcut per rendere il nostro codice più breve.

Poi dobbiamo anteporre e all'elemento JSX dell'oggetto che vogliamo rendere editable e definire la prop theatreKey:

Copy
// ...

export const Experience = () => {
  return (
    <>
      <e.directionalLight
        theatreKey="SunLight"
        position={[3, 3, 3]}
        intensity={0.2}
        castShadow
        shadow-bias={-0.001}
        shadow-mapSize-width={2048}
        shadow-mapSize-height={2048}
      />
      <e.group theatreKey="MedievalFantasyBook">
        <MedievalFantasyBook scale={0.1} envMapIntensity={0.3} />
      </e.group>
      <Environment preset="dawn" background blur={4} />
    </>
  );
};

Abbiamo reso la directional light e il Medieval Fantasy Book editable. Ricarichiamo la nostra pagina e vediamo cosa succede:

I nostri oggetti appaiono sotto il foglio principale nel pannello di contorno

Controlli

Siamo ora pronti per giocare con lo studio.