حتى الآن قمنا بإنشاء العديد من المشاهد ثلاثية الأبعاد، ولكننا قمنا بعرض مشهد واحد في كل مرة وملء الصفحة بالكامل.

في هذا الدرس، سنتعلم كيفية دمج مشاهد ثلاثية الأبعاد متعددة داخل صفحة HTML واحدة كما يمكنك إضافة صور، فيديوهات أو أي عنصر HTML آخر إلى موقعك.

المشروع الأساسي

في هذا الدرس، سنقوم بإنشاء صفحة هبوط لوكالة تطوير ويب ثلاثية الأبعاد خيالية.

تحتوي الحزمة الأساسية على صفحة بسيطة وجاهزة للاستخدام تحتوي على الأقسام التالية: الصفحة الرئيسية، الخدمات، الفريق، المحفظة، والتواصل.

هذه صفحة HTML عادية تحتوي على محتوى قابل للفهرسة لمحركات البحث وإمكانية الوصول، والتي سنقوم بتحسينها وتوضيحها بمحتوى ثلاثي الأبعاد.

صفحة الهبوط بدون محتوى ثلاثي الأبعاد

العرض

لإنشاء وعرض مشاهد ثلاثية الأبعاد متعددة في صفحتنا، سنستخدم View component من مكتبة Drei.

باستخدامه، يمكننا استخدام مكون Canvas واحد فقط وعرض مشاهد مستقلة متعددة (عروض) داخله. هذا مفيد للغاية حيث يسمح لنا باستخدام سياق WebGL واحد فقط وتجنب مشاكل الأداء.

ترتبط هذه العروض بعنصر HTML الهدف ويمكن وضعها وتحديد حجمها بشكل مستقل بينما تتفاعل بشكل صحيح مع أحداث اللمس، الماوس، التمرير وتغيير الحجم.

Canvas

لتحضير صفحتنا لمحتوى ثلاثي الأبعاد، دعونا نقوم بإنشاء مكون Canvas المعتاد في أعلى عنصر main.

HomePage.jsx:

Copy
// ...
import { Canvas } from "react-three-fiber";

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

  return (
    <main>
      <Canvas
        className="canvas"
        camera={{ position: [0, 0, 1.5], fov: 30 }}
      ></Canvas>
      {/* ... */}
    </main>
  );
};

تُستخدم فئة canvas لتنسيق الـcanvas وجعلها تحتل الصفحة بأكملها. وهي محددة بالفعل في ملف index.css.

التتبع

يحتوي مشروع البداية على مكونات مشهد ثلاثي الأبعاد سنستخدمها لعرض الأقسام المختلفة من الصفحة.

دعونا نضيف المكون المخصص لقسم الصفحة الرئيسية:

Copy
import { Hero3D } from "./Hero3D";

export const HomePage = () => {
  // ...
  return (
    <main>
      <Canvas className="canvas" camera={{ position: [0, 0, 1.5], fov: 30 }}>
        <Hero3D />
      </Canvas>
      {/* ... */}
    </main>
  );
};