برنامج Three.js التعليمي: كيفية عمل جدول دوري

مرحبًا.
أريد فقط أن أجعل مثال الجدول الدوري في وثائق three.js خطوة بخطوة.

بادئ ذي بدء ، ما هو three.js؟

تعد Three.js مكتبة لسهولة استخدام WebGL ، حيث تعرض الكائنات داخل متصفحنا. يمكنك قراءة الكثير عنها مع القليل من البحث داخل Google.

يمكنك مشاهدة المثال الذي نريد أن نجعله هنا:

https://threejs.org/examples/css3d_periodictable.html

فلنبدأ في ذلك

الملفات والمجلدات والمكتبات المطلوبة

أولاً وقبل كل شيء ، نحتاج إلى إنشاء الملفات والمجلدات المطلوبة وتنزيل مكتباتنا المطلوبة.

الملفات :
1- index.html

2- main.js

المجلدات :

1- ليب

2- ليب / ضوابط

3- lib / برامج العرض

مكتبات :

1- قم بتنزيل ملف js الثلاثة الرئيسي:

https://github.com/mrdoob/three.js/raw/master/build/three.min.js

ثم انسخه داخل مجلد lib

2- تحميل ملف مكتبة توين:

https://github.com/mrdoob/three.js/raw/master/examples/js/libs/tween.min.js

ثم انسخه داخل مجلد lib

3- تنزيل ملف TrackballControls:

https://raw.githubusercontent.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js

ثم انسخها داخل lib / controls

4 – تنزيل ملف CSS3DRenderer:

https://github.com/mrdoob/three.js/raw/master/examples/js/renderers/CSS3DRenderer.js

ثم انسخها داخل lib / controls

بدء الملفات والبيئة

1- index.html

هذا هو جزء HTML الخاص بنا وهو بسيط جدًا وصغير.

يربط هذا الجزء شفرات جافا سكريبت الخاصة بنا بـ HTML ويحمل المكتبات الموجودة داخل مجلد lib في المشروع ويقوم بعمل بضعة أزرار للتحكم في الجدول

لذلك ما عليك سوى نسخ هذه الأسطر من التعليمات البرمجية ولصقها داخل index.html:

سيتم تحميل عناصر Three.js داخل هذه العلامة:

إذا فتحنا index.html في متصفحنا ، فسنرى شاشة سوداء بها 4 أزرار نيون شبيهة بهذا:

2- main.js

في main.js سنضيف

مصفوفة الجدول الدوري لنموذج البيانات

وظيفة التهيئة لبدء الكاميرا والمشهد والأشياء وبعض الأشياء الأخرى بداخلها

وظيفة الحركة التي هي في الواقع حلقة لعرض مشروعنا في 60 إطارًا في الثانية وسنكون قادرين على رؤية التغييرات.

لذا يبدو ملفنا على النحو التالي:

لذا في نهاية هذه الخطوة ، نحن مستعدون للقيام بالمهمة الرئيسية.

الكاميرا ، المشهد ، العارض

نحتاج إلى بدء تشغيل أدوات three.js الأساسية حتى نتمكن من رؤية الأشياء داخل نافذتنا.

1- الكاميرا

الكاميرا هي في الواقع أعيننا داخل بيئة three.js بدون كاميرا لا يمكننا رؤية أي شيء.

لذا أضف متغير الكاميرا بعد متغير الجدول لتتمكن من استخدامه في الوظائف الأخرى:

ثم قم بعمل مثيل جديد لكاميرا المنظور داخل وظيفة init:

تتلقى كاميرا المنظور 5 معلمات (مجال الرؤية ، نسبة العرض إلى الارتفاع ، القريب ، البعيد)

اقرأ المزيد عنها في مستندات three.js:

عندما نصنع كائنًا داخل three.js ، سيتم إنشاء الكائن بتنسيق 0،0،0 ، لذلك لا يمكننا رؤية أي شيء باستخدام الكاميرا.

لرؤية الأشياء ، نحتاج إلى إعطائها موضعًا وهو z = 3000 في حالتنا.

لذا أضف هذا السطر مباشرةً أسفل تهيئة الكاميرا داخل وظيفة init.

لذا ستبدو وظيفة init هكذا.

2- المشهد

المشهد هو في الواقع مساحة يمكننا إضافة الأشياء والكاميرا إليه.

أضف متغير مشهد بعد متغير الكاميرا لاستخدامه داخل وظائف أخرى مثل هذا:

ثم أضف هذا السطر إلى وظيفة init للحصول على مثيل جديد لفئة المشهد:

الآن يبدو ملف main.js الخاص بنا كما يلي:

3- العارض

يُحمِّل العارض الكاميرا والمشهد داخل علامة HTML الخاصة بنا.

وهو في حالتنا ، CSS3DRenderer يمكنك أن تقرأ عنه داخل هذا الرابط:

نحتاج إلى إضافة متغير عارض بعد متغيرات الكاميرا والمشهد حتى نتمكن من استخدامه داخل الوظائف الأخرى:

ثم نحتاج إلى إضافة هذه الأسطر إلى وظيفة init:

في السطر الأول ، نحصل على مثيل جديد لفئة CSS3DRenderer.

السطر الثاني ، وضعنا حجمًا له.

في السطر الثالث ، نلحق العارض بعلامة html بمعرف “الحاوية”.

ثم نحتاج إلى إضافة وظيفة تسمى العرض لتحميل المشهد والكاميرا داخل العارض:

نحتاج الآن إلى إضافة دالة باسم onWindowResize:

سيتم استدعاء هذه الوظيفة في كل مرة يتغير فيها حجم النافذة.

ثم نحتاج إلى تحديد حجم العارض والكاميرا ، لذلك عندما نغير حجم النافذة ، سيتم تغيير حجم العارض ليظل مناسبًا داخل النافذة.

أيضًا ، سيتم استدعاء هذه الوظيفة عند التشغيل الأول باستخدام هذا السطر:

أضف هذا السطر في نهاية دالة init.

لذلك سوف تستدعي وظيفة التقديم.

أضف الآن هذا السطر داخل وظيفة الرسوم المتحركة لجعل مشروعنا متحركًا بدلاً من صورة ثابتة:

الآن يبدو ملف main.js الخاص بنا كما يلي:

في هذه الخطوة ، أضفنا ثلاثة عناصر أساسية من three.js داخل ملف main.js.

الآن مشهدنا فارغ وما زلنا لا نرى أي شيء سوى شاشة سوداء بأربعة أزرار.

فلنقم بإضافة أشياء داخل مشهدنا.

إضافة كائنات

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

ثم نضيفهم داخل حقل الجدول داخل متغير الأهداف مع مواضعهم الصحيحة داخل الجدول الدوري.

أولاً ، سنضيف المتغيرات المطلوبة بعد متغيرات الكاميرا والمشهد والعارض لاستخدامها داخل الوظائف:

ثم قم بعمل دالة باسم “simpleObjectsLayout”:

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

قم باستدعاء الوظيفة داخل دالة init بعد أسطر العارض:

الآن يبدو ملف main.js الخاص بنا كما يلي:

فلنقم بإضافة تنسيق الجدول

أضف هذه الوظيفة في main.js.

تضيف هذه الوظيفة فقط الكائنات داخل عنصر الجدول للكائن المستهدف مع وضعها القياسي.

ثم استدع هذه الوظيفة بعد دالة simpleObjectsLayout داخل دالة init.

في نهاية هذه الخطوة ، يبدو ملف main.js على النحو التالي:

ولكن مع ذلك ، لا يمكننا رؤية أي تغييرات وأصبح البرنامج التعليمي مملًا.

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

توين

في هذه الخطوة ، سنضيف رسومًا متحركة داخل مشروعنا لتحريك كائناتنا.

لهذا الغرض ، سوف نستخدم tween.

أضف هذه الوظيفة إلى main.js

تعمل هذه الوظيفة على إنشاء توين لكل كائن ثم تقوم بتحويلها إلى موقع مستهدف ودوران.

السطر الأول يفرغ تمامًا القائمة الداخلية للمراهقات

ثم أضف هذا السطر داخل وظيفة الرسوم المتحركة:

ثم استدع دالة التحويل داخل دالة init قبل window.eventListener:

يبدو ملف main.js الآن على النحو التالي:

بعد حفظ ملف main.js ، افتح index.html داخل متصفحك أو قم بتحديثه.
ستتمكن من رؤية الرسوم المتحركة الجميلة من تحويل مواضع عناصر الجدول.

ولكن لا يعمل أي من الأزرار ، فلنعمل على تشغيلها.

إضافة تخطيطات أخرى

لهذه الخطوة ، نحتاج إلى عمل تخطيطات أخرى للمشروع

على غرار خطوة إضافة الكائنات ، سنقوم بإعلان تخطيطات المجال واللولب والشبكة:

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

ثم استدع الوظائف داخل وظيفة init بحيث يبدو الملف على النحو التالي:

الآن ، نحن جاهزون لاستخدامها.

الأزرار

الآن من خلال امتلاك جميع التخطيطات المطلوبة ، يمكننا استخدام الأزرار للتحويل بينها

لذلك نحتاج إلى تعيين مستمع للنقرات للأزرار

لهذا الغرض قمت بعمل وظيفة:

تضيف هذه الوظيفة مستمعًا للنقرات إلى عنصر من خلال معرفه وداخل وظيفة رد الاتصال ، وتستخدم المعلمة الهدف لتمريرها إلى وظيفة التحويل.

ثم استخدمها داخل دالة init مثل:

بعد استدعاء وظيفة “gridLayout” مباشرة

الآن يبدو ملفنا بالشكل:

ويمكننا استخدام الأزرار.

ولكن يمكننا جعله مربي الحيوانات قليلاً

ضوابط كرة التتبع

بعد هذه الخطوة ، سنتمكن من التحكم في الكاميرا باستخدام كرة التتبع والماوس.

أضف متغير عناصر تحكم بعد متغير الأهداف:

ثم أضف هذه الوظيفة إلى الملف:

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

ثم استدعها داخل دالة init بعد سطر “document.getElementById”:

أضف هذا السطر داخل وظيفة الحركة:

يبدو ملفنا الآن كما يلي:

في نهاية هذه الخطوة ، انتهينا من المشروع.

ولكن دعونا نقوم ببعض إعادة البناء

إعادة بناء ديون

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

بعد بعض إعادة البناء ، يبدو ملف main.js الخاص بي كما هو موضح أعلاه.

تحديث: عناصر قابلة للنقر

قررت إضافة عناصر معالجة النقر في هذا البرنامج التعليمي.

الآن في التعليمات البرمجية المعاد بناؤها ، أضف هذا السطر في دالة htmlElement قبل إرجاع العنصر:

ثم أضف هذه الوظيفة إلى المشروع:

main.js النهائية:

المصدر النهائي:

النتيجة:
https://lvlrsajjad.github.io/p-t-example/