Theatre.js는 Three.js 및 React Three Fiber와 함께 영화 같은 경험을 만들 수 있게 하는 자바스크립트 애니메이션 라이브러리입니다.

지금까지 사용해온 다른 애니메이션 라이브러리와 비교하여 가장 눈에 띄는 기능은 시각적으로 애니메이션을 생성하고 편집할 수 있는 스튜디오 UI를 갖추고 있다는 점입니다.

Three.js 객체를 3D 공간에서 직접 애니메이션화하고, 여러 전환 및 완화 함수를 사용하는 복잡한 시퀀스를 만들기까지, Theatre.js는 놀라운 3D 전환을 만드는 데 필요한 모든 것을 제공합니다.

이번 강의에서는 가상의 중세 도시 웹사이트를 만들 것입니다. Pixel의 이 아름다운 Medieval Fantasy Book 모델을 사용할 것입니다.

애니메이션은 모델의 일부로서, 장면에 생기를 더하기 위해 자동 재생으로 유지됩니다.

또한 웹사이트의 다양한 섹션 간의 전환을 위해 TailwindCSS와 Framer Motion을 사용하여 UI를 준비했습니다.

웹의 다음 Steven Spielberg가 될 준비가 되셨나요? 시작해보겠습니다!

설치

Theatre.js를 프로젝트에 추가하려면, 터미널에서 다음 명령을 실행하세요:

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

그런 다음, 코드에서 프로젝트에 대해 작업할 sheet를 가져와야 합니다. App.jsx에서:

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

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

// ...

프로젝트 이름은 다른 프로젝트와의 충돌을 피하기 위해 고유해야 합니다. Theatre.js는 localStorage를 사용하여 애니메이션 데이터를 저장하며, 개발 중에는 동일한 브라우저 URL 및 포트를 자주 사용하므로 고유한 이름을 사용하는 것이 중요합니다.

sheet는 장면에서 하나 이상의 객체를 애니메이션화하는 데 사용됩니다. 이 프로젝트에서는 하나의 sheet만 사용합니다. 서로 독립적으로 객체를 애니메이션화하려면 여러 sheet를 사용하는 것이 좋습니다. 우리의 경우 모든 애니메이션이 같은 sheet에 있는 것이 적합합니다.

마지막으로 애니메이션될 모든 구성 요소를 <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;

이제 프로젝트에 시각적 편집기를 추가할 시간입니다.

Theatre.js Studio

우리 프로젝트에 Theatre.js Studio를 추가하려면 이를 가져오고 초기화해야 합니다:

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

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

// ...

꽤 간단하죠? 이제 프로젝트를 실행하면 화면에 Theatre.js Studio UI가 표시될 것입니다:

Editable

객체를 Theatre.js로 editable하게 만들어 studio에서 상호 작용할 수 있도록 하려면 editable 컴포넌트를 가져와야 합니다. Experience.jsx에서:

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

editable as e를 사용하는 이유는 공식 문서와 일치시키기 위함입니다. 이는 우리의 코드를 더 짧게 만들기 위한 간단한 지름길입니다.

그다음 editable로 만들고자 하는 객체의 JSX 요소에 e를 접두사로 붙이고 theatreKey prop을 정의해야 합니다:

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} />
    </>
  );
};

우리는 directional light와 Medieval Fantasy Book을 editable로 만들었습니다. 페이지를 새로 고침하고 어떤 일이 발생하는지 확인합시다:

우리의 객체들이 outline panel의 Main sheet 아래에 나타납니다.

컨트롤

이제 studio를 가지고 놀 준비가 되었습니다.