حتى الآن بالنسبة للتجارب الثلاثية الأبعاد التي قمنا ببنائها، كان لدينا عنصر HTML واحد فقط وهو canvas حيث كانت مشاهد Three.js الثلاثية الأبعاد الخاصة بنا تُعَرض.

هناك طريقتان لجعل تجاربنا أكثر تفاعلية:

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

هاتان الطريقتان ليستا متعارضتين. يمكنك دمجهما لخلق تجارب غامرة.

صالة عرض إيكيا عبر الإنترنت

لأجل هذا الدرس، فلنتخيل أننا نريد إنشاء صالة عرض عبر الإنترنت لشركة إيكيا. تحتوي الحزمة الأساسية على نماذج ثلاثية الأبعاد مختلفة لأثاث المطبخ (كلها تأتي من Quaternius على Poly Pizza، شكرًا لكم 🙏).

هذا ما لدينا الآن. مطبخ على الطراز الياباني.

سوف نحاول إضافة تسميات على أثاث المطبخ لعرض اسم وسعر كل عنصر.

قبل القيام بذلك، دعني أشرح بعض أجزاء من الحزمة الأساسية.

لجعل الشيفرة عامة، بدلاً من إعلان كل عنصر يدويًا وإعادة كتابة منطق التحميل والتموضع، قمت بإنشاء مصفوفة من العناصر.

Copy
const sceneItems = [
  {
    model: "Japanese Door.glb",
    position: [0, -0.88, -1.2],
    scale: 1.8,
  },
  {
    model: "Counter Sink.glb",
    position: [1.3, 0, -2.8],
  },
  {
    model: "Chopping board.glb",
    position: [2.8, 1.9, -2.8],
    scale: 0.5,
  },
  {
    model: "Fridge.glb",
    position: [-2.1, 0, -3],
  },
  {
    model: "Table.glb",
    position: [-1, 0, 2],
    scale: [1, 1, 1],
  },
  {
    model: "Dango.glb",
    position: [-1.4, 1.64, 2],
    scale: 0.72,
    rotation: [0, Math.PI / 6, 0],
  },
];

ثم قمت بإنشاء مكون عام يسمى Item يأخذ مسار النموذج وغيرها من خصائص التحول (الموقع، الدوران، المقياس...):

Copy
const Item = ({ model, position, rotation, ...props }) => {
  const gltf = useGLTF(`models/${model}`);

  return (
    <group position={position} rotation={rotation}>
      <primitive object={gltf.scene} {...props} />
    </group>
  );
};

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

ثم نقوم بالتكرار عبر مصفوفة العناصر وعرض مكون Item لكل عنصر:

Copy
export const Experience = () => {
  return (
    <>
      {sceneItems.map((item, index) => {
        return <Item key={index} {...item} />;
      })}
    </>
  );
};

عناصر HTML في ثلاثي الأبعاد

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

لنضف مزيدًا من المعلومات إلى مصفوفة العناصر بإضافة خاصية label وprice:

Copy
const sceneItems = [
  {
    model: "Japanese Door.glb",
    position: [0, -0.88, -1.2],
    scale: 1.8,
    name: "Hemnes",
    price: 300,
  },
  {
    model: "Counter Sink.glb",
    position: [1.3, 0, -2.8],
    name: "Lillången",
    price: 450,
  },
  {
    model: "Chopping board.glb",
    position: [2.8, 1.9, -2.8],
    scale: 0.5,
    name: "Skogsta",
    price: 25,
  },
  {
    model: "Fridge.glb",
    position: [-2.1, 0, -3],
    name: "Lagan",
    price: 600,
  },
  {
    model: "Table.glb",
    position: [-1, 0, 2],
    scale: [1, 1, 1],
    name: "Lerhamn",
    price: 80,
  },
  {
    model: "Dango.glb",
    position: [-1.4, 1.64, 2],
    scale: 0.72,
    rotation: [0, Math.PI / 6, 0],
    name: "Dango",
    price: 4,
  },
];

لا تأخذ إهانة من الأسماء والأسعار، فهي مولدة بواسطة GitHub Copilot...

الآن يمكننا تحديث المكون Item للحصول على خصائص name وprice وعرضها كـ عناصر HTML: