10 أمثلة مذهلة مفتوحة المصدر لعمل Three.js

قد يبدو الأمر مجنونًا ، ولكن يمكنك بالفعل إنشاء كائنات ثلاثية الأبعاد باستخدام JavaScript. يعتمد معظم مطوري الويب على مكتبات مثل Three.js لإنجاز ذلك.

لكنها عملية مفصلة لدرجة أنه لا يكلف الجميع عناء النظر فيها. الآن ، إذا كنت مهتمًا بأشياء 3D JS ، فإن أفضل طريقة للتعلم هي من خلال دراسة الآخرين. لهذا السبب بالضبط صنعت هذا المعرض.

هذه بعض من أفضل مشاريع Three.js التي يمكن أن أجدها مستضافة على CodePen. إنها تتميز بمجموعة من الأساليب والسمات المختلفة التي ستجعل محركك الإبداعي يعمل.

1. منخفض بولي الأرض

مع عنصر HTML واحد وبضع عشرات من سطور CSS / JS ، لدينا هذه الأرض المنخفضة من قبل المطور Sam Saccone.

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

يجب على أي شخص استخدم Three.js من قبل أن يعرف مدى روعة هذا الأمر.

إنها بالتأكيد قفزة قبل مشاريع مماثلة - معظمها لقاعدة شفراتها الأصغر.

2. المجالات

يستخدم هذا المشروع الغريب الذي يشبه الكوكب أيضًا Three.js بتأثير أنيق جدًا. تعمل المجالات الكروية على معالج Stylus ، والذي يمكنك رؤيته مستوردًا في CSS.

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

تنزلق الكرات الأصغر فوق الجرم السماوي الأكبر باستخدام وظائف هندسية من مكتبة JS. يبدو من الجنون أن هذا ممكن ، لكنه دليل على مدى تقدمنا ​​مع CSS.

3. دوران الكوكب

للحصول على المزيد من الأفكار الكواكب ، لدينا هذه المجرة الدوارة المجنونة التي أنشأها المطور Bryan Jones.

كما أنه لا يستخدم شيئًا سوى Three.js وبعض CSS الأساسي لتصميم الكواكب وتنظيمها. يجب أن أقول ، التأثيرات ثلاثية الأبعاد مدهشة. ما زلت لا أستطيع الالتفاف حول حقيقة أن هذه الأشياء ممكنة في متصفح ويب نموذجي!

ولكن ليس هناك من ينكر أن مقتطف CodePen هذا يعد مساعدًا رائعًا للدراسة إذا كنت قد بدأت للتو في منطقة Three.js.

4. شعار Treehouse في Three.js

يعتبر مصدر التعلم عبر الإنترنت Treehouse مجرد ظاهرة استثنائية - خاصة للمبتدئين. قام أحد مدربيهم ، نيك بيتيت ، بإنشاء شعار Treehouse كاملاً باستخدام Three.js.

واسمحوا لي أن أقول أن هذا الشيء رائع! لم أر أبدًا إعدادًا كهذا ونادرًا ما أرى أقلام تحتوي على مثل هذه التعليقات التفصيلية. يجعل رمز Nick الأمر أكثر سهولة في البحث والعثور على الوظائف التي لا تفهمها ثم النقر على Google للحصول على إجابات.

يجب أن يثبت كل شيء عن هذا الشعار ثلاثي الأبعاد أن JS الحديثة ليست قديمة على الإطلاق.

تلميح: حاول النقر مع السحب فوق الشاشة لتدوير الشعار. متعة الاشياء!

5. برميل خشبي

إليك مقتطف مجنون آخر تم تطويره بواسطة Nick Pettit باستخدام رمز JS النقي فقط. بدون HTML ولا CSS - يتم تقديم كل شيء من خلال لغة JavaScript.

يعتمد هذا بطبيعة الحال على عنصر Canvas ، والذي يمكنك إنشاؤه داخل JavaScript. لقد استخدمتها بنفسي قليلاً - لكن لم تصل أبدًا إلى هذا المستوى. يظهر مدى ما يمكنك القيام به باستخدام مكتبة ثلاثية الأبعاد صلبة.

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

6. Three.js + TweenMax

قام المطور Martand Kashyap بدمج نص TweenMax مع Three.js لجعل هذا الشيء الجنوني.

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

كان هذا يعتمد في الواقع على مشروع رسم متحرك قام Martand بتحويله إلى JavaScript. أرى هذا كثيرًا في كثير من الأحيان وهو مثير للإعجاب.

7. حقل نجم الجسيمات

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

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

يتم إنشاء الجسيمات ديناميكيًا ويمكنك النقر فوق أي مكان في الصفحة للتكبير. يبدو هذا وكأنه فراغ لا ينتهي أبدًا - يشبه إلى حد كبير الجزء الذي نعيش فيه. ولكن هذا تم إنشاؤه باستخدام شفرة JS نقية.

8. مكعبات هامل

لمزيد من الأشكال الهندسية الدوارة ، تحقق من هذه المكعبات الثلاثة. يتم تشغيلهم على لغة Haml Templating جنبًا إلى جنب مع حوالي 100 سطر من JavaScript.

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

لحسن الحظ ، يمكنك التعامل مع كل ذلك من خلال Three.js - باستخدام المقتطفات الصحيحة. ويمكن أن يعمل هذا كنموذج رائع لهذا الغرض.

9. تسراكت

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

لكن لاحظ أن هذا العرض التوضيحي يتطلب الكثير من المكتبات لبدء العمل به. يمتلك مايك خمسة نصوص JS مختلفة مع jQuery و jQuery UI و ThreeJS و TweenJS و CubeJS النصي. يتم استضافة الثلاثة الأخيرة على موقعه الشخصي ويجب أن يكون الوصول إليها مجانيًا.

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

10. شظايا ثلاثية الأبعاد

قام المطور Tobias Duhr ببناء هذه الشظايا ثلاثية الأبعاد كنموذج لما هو ممكن في ThreeJS. إنها تعمل مثل المكعبات الدوارة المذكورة سابقًا ، باستثناء الأشكال المختلفة واختفى التظليل أيضًا.

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

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

11. شجرة فيثاغورس ثلاثية الأبعاد

هذه شجرة فيثاغورس ثلاثية الأبعاد مذهلة بكل بساطة. قام المطور Josep Llodra بإنشاء هذا المشروع باستخدام 150 سطرًا فقط من JavaScript ، جنبًا إلى جنب مع مكتبة Three.js.

إنه في الواقع يعتمد على هذا المشروع ، الذي ذكرته سابقًا. في الأساس ، يقوم ببناء هذه المكعبات في شكل واحد محدد ، ثم ينظمها بناءً على الحجم والموضع.

إذا لم تكن متأكدًا مما يمكنك فعله باستخدام Three.js ، فأتمنى أن يقدم هذا المعرض القليل من الإلهام. ولكن يمكنك دائمًا العثور على المزيد على CodePen إذا كنت ترغب في البحث حولك.