قبل أن نبدأ في البرمجة، لنلقي نظرة على سبب استخدامنا لـ React Three Fiber وما هو.

WebGL

WebGL هو واجهة برمجة تطبيقات JavaScript لرسم الرسوم التفاعلية ثنائية وثلاثية الأبعاد داخل أي متصفح ويب متوافق دون استخدام إضافات.

ويستند إلى OpenGL ES، وهي واجهة برمجة تطبيقات للرسوم ثلاثية الأبعاد على مستوى منخفض للأجهزة المدمجة. يتيح WebGL تصوير الرسوم ثنائية وثلاثية الأبعاد باستخدام التعجيل بواسطة الأجهزة، مما يجعل من الممكن إنشاء تصورات معقدة وألعاب تعمل بسلاسة في المتصفح.

لكن كتابة كود WebGL مباشرة صعبة للغاية وتستغرق وقتًا طويلاً. وهنا يأتي دور Three.js...

Three.js

Three.js هو مكتبة JavaScript توفر واجهة برمجة تطبيقات بسيطة لإنشاء وتحريك الرسوم ثلاثية الأبعاد في المتصفح باستخدام WebGL.

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

React Three Fiber

React Three Fiber هو محرك عرض React لـ Three.js يتيح لك استخدام Three.js بطريقة تصريحية، مشابهة لكيفية استخدام React لبناء واجهات المستخدم.

سترون أيضًا يشار إليه بـ R3F.

يوفر R3F مجموعة من مكونات React التي تتطابق مع كائنات Three.js، مثل meshes، وlights، وcameras، ويسمح لك باستخدام نموذج المكونات لـ React لبناء مشاهد ثلاثية الأبعاد معقدة ورسوم متحركة.

لنفس النتيجة، يكون كود React Three Fiber أقصر وأسهل في القراءة من كود Three.js.

إليك مثال بسيط لعرض مكعب مع كلا المكتبتين:

Copy
// Three.js
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

Copy
// React Three Fiber
<mesh>
  <boxGeometry />
  <meshBasicMaterial color={0x00ff00} />
</mesh>

Poimandres

Poimandres معروف أيضًا باسم pmndrs هو مجموعة من المطورين النشطين بشكل كبير والمسؤولة عن React Three Fiber وغيرها من المكتبات المفيدة جدًا مثل:

• drei: مجموعة من المساعدين المفيدين والمكونات الوظائفية الكاملة لـ r3f
• gltfjsx: أداة سطر الأوامر التي تُنشئ مكونات جاهزة للاستخدام من ملفات gltf (تنسيق ملفات النماذج ثلاثية الأبعاد)
• react-spring: مكتبة رسوميات متحركة تعتمد على فيزياء الزنبرك
• zustand: حل فعال وصغير وقابل للتوسعة لإدارة الحالة
• react-xr: مجموعة من مكونات React التي تجعل من السهل إنشاء تجارب VR و AR باستخدام R3F ... وأكثر من ذلك بكثير!

سنستخدم بعضًا من هذه المكتبات في هذه الدورة.

أنصحك بالاطلاع عليها بانتظام، حيث يتم تحديثها باستمرار بميزات وتحسينات جديدة.

البدائل

هناك مكتبات أخرى توفر وظائف مشابهة لأطر العمل الأمامية الأخرى، مثل Threlte لـ Svelte، وTresJS لـ Vue، وAngular Three لأجل Angular.

مؤخرًا، قامت pmndrs أيضًا بإصدار drei-vanilla وهي نسخة فانيللا من drei لأولئك الذين يرغبون في استخدام مكوناتها بدون React.