حتى الآن، استخدمنا فقط الأشكال البدائية لإنشاء مشاهد ثلاثية الأبعاد لدينا (مكعب، كرة، سطح، إلخ...).

لكن ما يجعل الرسوميات ثلاثية الأبعاد مثيرة للاهتمام هو القدرة على استيراد وعرض النماذج ثلاثية الأبعاد التي تم إنشاؤها بواسطة برامج النمذجة ثلاثية الأبعاد مثل Blender، Maya، Cinema 4D، Nomad Sculpt، إلخ...

مقدمة

لن نقوم بـ النمذجة ثلاثية الأبعاد في هذا الدرس لأنها موضوع كامل بحد ذاته. إنها ليست مهارة ضرورية لإنشاء تجارب ثلاثية الأبعاد باستخدام threejs وReact Three Fiber. يمكنك العثور على العديد من النماذج ثلاثية الأبعاد المجانية عبر الإنترنت واستخدامها في مشاريعك. ولكن يمكن أن يكون تعلم أساسيات النمذجة ثلاثية الأبعاد مفيدًا جدًا لفهم كيفية إنشاء النماذج ثلاثية الأبعاد واستخدامها بشكل أفضل في مشاريعك.

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

أشهر درس للبدء هو درس الدونات من Blender Guru.

النماذج ثلاثية الأبعاد

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

هناك العديد من تنسيقات الملفات المختلفة للنماذج ثلاثية الأبعاد. الأكثر شيوعاً هي:

• .obj: تنسيق ملف بسيط يحتوي فقط على الهندسة الخاصة بالنموذج ثلاثي الأبعاد.
• .fbx: تنسيق ملف ثنائي يحتوي على الهندسة، الملمس، والحركات الخاصة بالنموذج ثلاثي الأبعاد. هذا هو التنسيق المستخدم بواسطة Unity وUnreal Engine.
• .gltf: تنسيق ملف JSON يحتوي على الهندسة، الملمس، والحركات الخاصة بالنموذج ثلاثي الأبعاد. إنه التنسيق الموصى به للويب حيث أنه تنسيق مدمج جدًا.
• .glb: النسخة الثنائية من تنسيق .gltf. إنه تنسيق أكثر مدمجًا عادةً بحجم أصغر بنسبة 33% من تنسيق .gltf.

في هذا الدرس، سنستخدم تنسيقات .gltf و.glb.

من السهل تحويل نموذج ثلاثي الأبعاد من تنسيق إلى آخر باستخدام Blender.

إيجاد نماذج ثلاثية الأبعاد

إليك بعض المواقع التي يمكنك العثور فيها على نماذج ثلاثية الأبعاد مجانية:

• Poly Pizza: مجموعة من النماذج ثلاثية الأبعاد منخفضة التفاصيل وخالية من الرسوم
• Pmndrs Market: مجموعة أخرى من الأصول ثلاثية الأبعاد خالية من الرسوم (نعم، من المبدعين لـ React Three Fiber!)
• Sketchfab: منصة لمشاركة وتنزيل النماذج ثلاثية الأبعاد. العديد من النماذج المجانية متاحة!
• Unity Asset Store: كانت مخصصة في الأصل لـ Unity، لكن يمكنك العثور على العديد من حزم النماذج ثلاثية الأبعاد التي يمكنك استخدامها في مشاريعك.
• Quaternius: فنان ثلاثي الأبعاد يشارك حزم نماذج ثلاثية الأبعاد مجانية على موقعه.
• Kenney: منشئ رائع آخر يشارك العديد من حزم النماذج ثلاثية الأبعاد المجانية والمرتفعة الجودة.

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

لدينا الآن نماذج ثلاثية الأبعاد، دعنا نرى كيفية تحميلها في مشاريعنا.

هيكل المشروع

مجلد public هو المجلد الجذري لمشروعنا. إنه المكان الذي نضع فيه جميع الأصول الثابتة لمشروعنا (الصور، النماذج ثلاثية الأبعاد، ملفات الصوت، إلخ...).

للحفاظ على تنظيم مشروعنا، سننشئ مجلد models في مجلد public لتخزين جميع نماذجنا ثلاثية الأبعاد.

تحتوي حزمة البدء بالفعل على مجلد models ببعض النماذج ثلاثية الأبعاد فيه. إنها من Quaternius.

استخدام useLoader

المكون الأساسي لتحميل أي موارد خارجية في React Three Fiber هو الـ useLoader. إنه هوك يأخذ loader كأول وسيط و url كوسيط ثاني. ويعيد المورد المحمل.

يُعتبر الـ loader فئة تمتد من الفئة Loader في threejs. هناك العديد من الـ loaders المتاحة في threejs لتحميل أنواع مختلفة من الموارد. على سبيل المثال، يتم استخدام GLTFLoader لتحميل ملفات .gltf و .glb.

دعنا نحمل أول نموذج ثلاثي الأبعاد:

Copy
import { useLoader } from "@react-three/fiber";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

export const Experience = () => {
  const model = useLoader(GLTFLoader, "models/Fish.gltf");

  return (
    <>
      <primitive object={model.scene} />
    </>
  );
};

يُستخدم مكون primitive لعرض كائن threejs في مشهدنا. يأخذ مكون object الذي هو كائن threejs الذي نريد عرضه.

تم الآن تحميل النموذج ثلاثي الأبعاد الخاص بنا وعرضه في مشهدنا. (يبدو رائعًا، أليس كذلك؟)

يتولى useLoader مسؤولية تخزين الموارد المحملة مؤقتًا. لذلك إذا قمنا بتحميل نفس المورد عدة مرات، فسيتم تحميله مرة واحدة فقط.

useGLTF / useFBX

توفر مكتبة Drei تعليمتين لتحميل النماذج ثلاثية الأبعاد: useGLTF و useFBX. هما عبارة عن أغلفة حول تعليمة useLoader لكنها أسهل في الاستخدام.

فلنقم بتحديث الكود الحالي لاستخدام تعليمة useGLTF: