Theatre.js adalah perpustakaan animasi javascript yang memungkinkan kita membuat pengalaman sinematik dengan Three.js dan React Three Fiber.

Fitur utamanya dibandingkan dengan perpustakaan animasi lainnya yang telah kita gunakan sejauh ini adalah bahwa ia dilengkapi dengan studio UI yang memungkinkan kita untuk membuat dan mengedit animasi secara visual.

Dari memanipulasi objek Three.js langsung di ruang 3D hingga membuat urutan kompleks dengan berbagai transisi dan fungsi pelunakan, Theatre.js memiliki semua yang kita butuhkan untuk membuat transisi 3D yang menakjubkan.

Untuk pelajaran ini, kita akan membuat situs web untuk kota abad pertengahan imajiner. Kita akan menggunakan model Medieval Fantasy Book yang indah ini oleh Pixel.

Animasi merupakan bagian dari model, kita biarkan dalam mode autoplay untuk menambah kesan hidup pada adegan.

Saya juga telah menyiapkan UI dengan TailwindCSS dan Framer Motion untuk beralih antara berbagai bagian dari situs web.

Siap untuk menjadi Steven Spielberg berikutnya dari web? Mari kita mulai!

Instalasi

Untuk menambahkan Theatre.js ke proyek kita, jalankan perintah berikut di terminal Anda:

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

Kemudian, dalam kode kita, kita perlu mendapatkan sheet yang akan kita kerjakan untuk proyek kita. Dalam App.jsx:

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

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

// ...

Nama proyek harus unik untuk menghindari konflik dengan proyek lain. Karena Theatre.js menggunakan localStorage untuk menyimpan data animasi dan kita sering menggunakan url dan port browser yang sama dalam pengembangan, penting untuk menggunakan nama yang unik.

Sheet digunakan untuk menganimasikan satu atau lebih objek di dalam adegan. Kita akan menggunakan hanya satu sheet untuk proyek ini. Anda harus mempertimbangkan untuk menggunakan beberapa sheet jika ingin menganimasikan objek berbeda secara independen. Dalam kasus kita, semua animasi kita masuk akal untuk berada di sheet yang sama.

Terakhir, kita perlu membungkus semua komponen yang akan dianimasikan dalam <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;

Sekarang saatnya menambahkan editor visual ke dalam proyek kita.

Theatre.js Studio

Untuk menambahkan Theatre.js Studio ke proyek kita, kita perlu mengimpornya dan menginisialisasikannya:

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

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

// ...

Cukup sederhana, bukan? Sekarang jika Anda menjalankan proyek Anda, Anda seharusnya melihat antarmuka Theatre.js Studio di layar Anda:

Editable

Untuk membuat sebuah objek menjadi editable dengan Theatre.js dan dapat berinteraksi dengannya dalam studio, kita perlu mengimpor komponen editable. Dalam Experience.jsx:

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

Kita menggunakan editable as e untuk menyesuaikan dengan dokumentasi resmi. Ini adalah jalan pintas sederhana untuk membuat kode kita lebih pendek.

Kemudian kita perlu menambahkan prefix elemen JSX objek yang ingin kita jadikan editable dengan e dan mendefinisikan properti 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} />
    </>
  );
};

Kita telah membuat directional light dan Medieval Fantasy Book menjadi editable. Mari kita muat ulang halaman kita dan lihat apa yang terjadi:

Objek kita muncul di bawah Main sheet di panel outline

Kontrol

Sekarang kita siap bermain dengan studio.