استخدام Three.js لإضافة عناصر ثلاثية الأبعاد إلى مواقع الويب الخاصة بك

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

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

دعنا نذهب اليها.

ما هو Three.js

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

Three.js هي مكتبة جافا سكريبت ثلاثية الأبعاد توفر عارضين <canvas> و <svg> و CSS3D و WebGL. إنه يجلب تصميمات ثلاثية الأبعاد إلى متصفحك دون الحاجة إلى مكون إضافي. يمكن أن تساعدك المكتبة في إنشاء عناصر بسيطة ثلاثية الأبعاد وتفاعلات ثلاثية الأبعاد معقدة وألعاب رسوم متحركة إبداعية. Three.js هي مكتبة مفتوحة المصدر بها مستودع Github حيث يمكن للمستخدمين مشاركة إبداعات Three.js الخاصة بهم.

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

فهم مشهد ثلاثي الأبعاد ومصطلحات Three.js

لإنشاء رسم متحرك ثلاثي الأبعاد باستخدام Three.js ، يجب أولاً فهم كيفية إعداد مشهد ثلاثي الأبعاد. العناصر الثلاثة اللازمة لإنشاء إعداد ثلاثي الأبعاد هي كما يلي:

1. المشهد
2. الكاميرا
3. العارض

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

بمجرد إعداد المشهد ، يتم وضع الأشياء فيه. تم بناء الكائنات في ثلاث خطوات:

1. الهندسة
2. المادة
3. شبكة

هندسة الكائن هي الهيكل العظمي أو المخطط التفصيلي الأساسي للشكل. لإعطاء الهندسة لونًا أو نسيجًا ، يتم تطبيق المادة . يسمى الجمع بين الهندسة والمادة بالشبكة .

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

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

الشروع في العمل مع Three.js

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

في موقع ويب Three.js وعلى Github الخاص بهم ، ستجد نسخة حية من الكود لأبسط تطبيق Three.js. يستخدمون JSFiddle ولكن يمكنك أيضًا رؤيته يعمل على CodePen أو Codesandbox.io

أقترح عليك اتباع الخطوات الواردة في موقع ويب Three.js لفهم كيفية عمل كل شيء حقًا. إما باستخدام Codepen أو الجهاز الطرفي أو برنامج الترميز المفضل. مكتبة Three.js بأكملها متاحة على موقع Threejs.org لاستخدامها بمجرد ضبط المشهد الخاص بك والبدء في ملاحظة ما يمكن القيام به. أدناه يمكنك رؤية تطبيق Three.js الأساسي الذي يعمل على JSFiddle. انقر فوق "تحرير مع JSFiddle" للعب مع الكود.

Three.js مصادر التعلم

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

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

إذا كنت ترغب في الغوص بعمق في Three.js و WebGL ، فإن دورة Udemy هذه تشرح كل شيء وتعد بأن تكون بطلاقة في إنشاء محتوى ثلاثي الأبعاد بنهاية ذلك.

هل تبحث عن برنامج تعليمي دقيق وسريع وقذر؟ هذا البرنامج التعليمي التعليمات البرمجية خطوة بخطوة على CreativeBloq هو فقط ما تحتاجه.

أمثلة على Three.js

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

باستخدام Three.js مع Divi

يعد استخدام Three.js مع Divi أمرًا بسيطًا للغاية. تحتاج فقط إلى إضافة مكتبة جافا سكريبت إلى ملفات مشروعك وإضافتها إلى ملف HTML الخاص بك. لإضافة تطبيق إلى أي تخطيط Divi ، قم أولاً بإنشاء التصميم ثلاثي الأبعاد بشكل منفصل على برنامج الترميز المفضل لديك أو على جهاز الكمبيوتر الخاص بك. عندما يكون الإصدار جاهزًا ، انسخ جافا سكريبت في وحدة التعليمات البرمجية. تأكد من استخدام علامات الفتح والإغلاق <script>.

استنتاج

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

صورة مميزة عبر Theromb / shutterstock.com