Theatre.js هو مكتبة جافا سكريبت للرسوم المتحركة تتيح لنا إنشاء تجارب سينمائية باستخدام Three.js و React Three Fiber.

الميزة الرئيسية التي تميزها عن مكتبات الرسوم المتحركة الأخرى التي استخدمناها حتى الآن هي أنها تأتي بواجهة مستخدم استوديو UI تتيح لنا إنشاء وتحرير الرسوم المتحركة بشكل مرئي.

بدءًا من تحريك كائنات Three.js مباشرة في الفضاء الثلاثي الأبعاد إلى إنشاء تتابعات معقدة مع انتقالات متعددة ووظائف تخفيف، يحتوي Theatre.js على كل ما نحتاجه لإنشاء انتقالات ثلاثية الأبعاد مذهلة.

لهذا الدرس، سنقوم بإنشاء موقع ويب لمدينة خيالية في العصور الوسطى. سنستخدم هذا النموذج الجميل Medieval Fantasy Book من Pixel.

الرسوم المتحركة هي جزء من النموذج، نتركها في التشغيل التلقائي لإضافة بعض الحياة إلى المشهد.

كما قمت بإعداد واجهة المستخدم باستخدام TailwindCSS و Framer Motion للتبديل بين أقسام مختلفة من الموقع.

هل أنت مستعد لتكون ستيفين سبيلبرغ القادم في الويب؟ لنبدأ!

التثبيت

لإضافة 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 لتخزين بيانات الرسوم المتحركة وغالبًا ما نستخدم نفس عنوان المتصفح والمنفذ في التطوير، فمن المهم استخدام اسم فريد.

الـ 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;

حان الوقت الآن لإضافة المحرر المرئي إلى مشروعنا.

مسرح.js استوديو

لإضافة استوديو مسرح.js إلى مشروعنا، نحتاج إلى استيراده وتهيئته:

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

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

// ...

بسيط جداً، أليس كذلك؟ الآن، إذا قمت بتشغيل مشروعك، يجب أن ترى واجهة المستخدم الخاصة بـ استوديو مسرح.js على شاشتك:

قابلة للتحرير

لجعل كائن قابلاً للتحرير مع مسرح.js والقدرة على التفاعل معه في الاستوديو، نحتاج إلى استيراد المكون editable. في Experience.jsx:

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

نحن نستخدم editable as e لتطابق الوثائق الرسمية. إنها ببساطة اختصار لجعل شيفرتنا أقصر.

ثم نحتاج إلى إضافة البادئة e إلى عنصر JSX الخاص بالكائن الذي نريد جعله قابلاً للتحرير وتحديد الخاصية 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} />
    </>
  );
};

لقد جعلنا الضوء الاتجاهي و كتاب الخيال العصور الوسطى قابلين للتحرير. لنقم بتحديث صفحتنا ونرى ما يحدث:

تظهر كائناتنا تحت الورقة الرئيسية في لوحة الهيكل

أدوات التحكم

نحن الآن جاهزون للعب مع الاستوديو.