9 استخدامات رائعة للثلاثي الأبعاد في تصميم الويب

وصلت الأبعاد الثلاثية على الويب حقًا في عام 2011 مع إطلاق WebGL ، وهي واجهة برمجة تطبيقات JavaScript لتقديم رسومات ثلاثية الأبعاد داخل متصفح متوافق دون استخدام المكونات الإضافية. وشهدت السنوات التالية الكثير من الإثارة لإمكانيات 3D بين مصممي الويب.

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



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



01. Acko.net

عنوان طويل ومتعرج لموقع ويب المطور Steve Wittens

عنوان طويل ومتعرج لموقع ويب المطور Steve Wittens

إذا كنت تبحث عن مثال لما يمكن أن تجلبه تقنية 3D المستندة إلى المتصفح إلى الويب ، فلن تحتاج إلى مزيد من البحث عن Acko.net ، وهو الموقع الشخصي لمطور الويب ستيفن ويتينز. تتميز برأس متحرك جميل مستوحى من فن الشارع ؛ إنها فكرة بسيطة ولكن تم تنفيذها بشكل رائع.



قام Wittens بإنشائه باستخدام مزيج من CSS 3D و WebGL. ويوضح أن 'التواء كل شريط لا يتم إنشاؤه بشكل عشوائي ، بل يتم اشتقاقه رياضيًا'. 'إنه يجسد المبدأ التفاضلي للنقل الموازي. يتغير الاتجاه العلوي بالتوازي مع كل منحنى ، مما يعني أن الشرائط لا تدور في مكانها أبدًا. يتحولون فقط عندما يريدون ذلك بشكل طبيعي. وبالتالي ، فإن نوع التصميم لديه إرادة خاصة به '.

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

02. مذنبات كامبو آل

ادخل إلى عالم خيالي عبر موقع النبيذ هذا الحائز على جوائز



ادخل إلى عالم خيالي عبر موقع النبيذ هذا الحائز على جوائز

منذ إطلاقه في فبراير ، فاز هذا الموقع بالفعل بالعديد من الجوائز ، وليس من الصعب معرفة السبب. تم إنشاؤه للترويج للنبيذ الإيطالي Campo Alle Comete ، وهو يصور مدينة ثلاثية الأبعاد عائمة ، 'حيث يمكن أن تلتقي الأحلام والسحر أخيرًا'. إن الصفات الخيالية للتصميم ، مقترنة بسلاسة التنفيذ ، مذهلة للغاية ، ومن دواعي سروري حقًا أن تتجول في هذا العالم الخيالي باستخدام الماوس.

  • 7 أدوات جديدة لتصميم الجرافيك لتجعل حياتك أسهل

بناها الاستوديوهات الإيطالية هذه و مونوجريد ، تم إنشاء هذا الاستخدام الرائع للأبعاد الثلاثية على الويب باستخدام WebGL و GSAP جنبًا إلى جنب مع three.js و AngularJS.

03. Stripe.com

تنفيذ بسيط ولكنه فعال للأبعاد الثلاثية على موقع منصة الدفع Stripe

كيفية صنع قلم ستايلس للأندرويد
تنفيذ بسيط ولكنه فعال للأبعاد الثلاثية على موقع منصة الدفع Stripe

تطبيق أبسط بكثير للأبعاد الثلاثية ، فإن هذا المجسم التفاعلي الدوار هذا فعال للغاية في تقديم مجموعة من خيارات القائمة بطريقة رائعة ومبتكرة. ظهرت على منصة الدفع على موقع Stripe ، وقد صممها Bill Labus ، بناءً على فكرة عن Krithika Muthukumar ، التي تعمل على تسويق المنتجات في Stripe.

يوضح لابوس: 'كانت تتصور طريقة لتمثيل شحنة Stripe بصريًا من منظور Radar ، والتي تستخدم التعلم الآلي لتسجيل الرسوم الواردة والتنبؤ باحتمالية كونها مشروعة أو احتيالية'. 'التعلم الآلي هو مجرد فكرة مجردة بطبيعته ، لذلك بدا أن الكائن ثلاثي الأبعاد طريقة فعالة لجعل المفهوم ملموسًا بشكل أكبر.'

يعد التعلم الآلي مجرد فكرة مجردة بطبيعته ، لذلك بدا أن الكائن ثلاثي الأبعاد طريقة فعالة لجعل المفهوم ملموسًا بشكل أكبر

بيل لابوس

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

'النسخة الأولية استخدمت ببساطة الأصل المدمج. ومع ذلك ، قررنا لاحقًا أننا نريد حوافًا مستديرة على الشكل لتتناسب بشكل أفضل مع الاستخدام الجمالي ثلاثي الأبعاد الموجود في أي مكان آخر شريط.كوم ، لذلك قدمنا ​​مجسمًا مدورًا للعشروني الوجوه في Cinema4D وحملناه ككائن في three.js. لا يتم عرض تسميات الرؤوس التي تمثل السمات المختلفة لشحنة ما في البيئة ثلاثية الأبعاد ، ولكن كعناصر HTML عادية فوق اللوحة ثلاثية الأبعاد. كان هذا لضمان تقديم أعلى جودة للنص وأيضًا لتسهيل الترجمة.

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

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

كيف تصبح محرر فيديو

04. ديان مارتل

هذه العناوين القابلة للتدوير والتمرير ممتعة للعب بها

هذه العناوين القابلة للتدوير والتمرير ممتعة للعب بها

لقد رأينا نصًا على الويب بأسلوب Star Wars الافتتاحي من قبل ، ولكن لم يعجبنا هذا أبدًا. يستخدم الموقع الإلكتروني لمخرجة الفيديو الموسيقي الأمريكية ومصممة الرقصات ديان مارتل (اشتهرت بفيديو 'Blurred Lines') الجهاز بشكل كبير لعرض عناوين أعمالها على صفحتها الرئيسية.

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

05. خرائط نظام التشغيل

تسير خرائط مسح الذخائر ثلاثية الأبعاد

تسير خرائط مسح الذخائر ثلاثية الأبعاد

من الاستخدام الممتع والعبث للأبعاد ثلاثية الأبعاد إلى الاستخدام العملي الكامل. قدمت شركة Ordnance Survey ، وهي وكالة رسم الخرائط الوطنية في المملكة المتحدة وأحد أكبر منتجي الخرائط في العالم ، تحديثًا رئيسيًا لخرائط OS الحائزة على جوائز ، حيث قدمت خرائط ثلاثية الأبعاد دقيقة للريف البريطاني.

محبوب من قبل المشاة وراكبي الدراجات وغيرهم ممن يجتازون تلال ووديان المملكة المتحدة ، يتوفر OS Maps عبر الويب وكتطبيق. يكشف الضابط الصحفي كيغان ويلسون: 'يحتوي على ما يزيد عن 750.000 مسارًا مخزّنًا فيه ، وسيعني العنصر ثلاثي الأبعاد أنه يمكنك رؤية الطرق بشكل أفضل والحصول على فكرة عما إذا كان الطريق ممكنًا'.

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

06. الأرض 2050

تقدم Kaspersky مستقبل الأرض باستخدام كرة أرضية تفاعلية ثلاثية الأبعاد

تقدم Kaspersky مستقبل الأرض باستخدام كرة أرضية تفاعلية ثلاثية الأبعاد

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

جهاز لوحي للرسم xp-pen Artist 15.6 ".

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

أوضح الفريق في Possible: 'استلهم مفهومنا من Google Street View وألعاب الكمبيوتر مثل UFO و Civilization ، بالإضافة إلى النظرة المستقبلية لشركة Kaspersky Lab نفسها'. 'كانت الكرة الأرضية تُنشئ باستخدام WebGL الأصلي و HTML5 و CSS3 و JS و WebGL و PHP 7. تضمن إنشاء الواجهة الأمامية تحسين النطاق الترددي والتخزين المؤقت القياسي للمتصفح ووحدات المحتوى والترميز ووحدات WebGL مع الكوكب والتصفح وتحرير البانوراما.'

07. تيتوان ماتيس

يجلب المطور تيتوان ماتيس موقعه الشخصي إلى الحياة من خلال سلسلة ممتعة من الرسوم المتحركة

يجلب المطور تيتوان ماتيس موقعه الشخصي إلى الحياة من خلال سلسلة ممتعة من الرسوم المتحركة

Titouan Mathis ، مطور ويب مقره في ستراسبورغ بفرنسا ، لديه موقع ويب بسيط للغاية يستخدمه لربط موقعه على Twitter و Instagram وصاحب العمل Studio Meta. لكنه ينبض بالحياة مع دفقة مسلية من الرسوم المتحركة ثلاثية الأبعاد التفاعلية: ثلاثة أنماط متصاعدة باستمرار تبدو فائقة الأناقة ، والتي لا يمكنك إلا أن تتلاعب بها.

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

تم إنشاء الرسوم المتحركة الثلاثة باستخدام HTML و CSS وجافا سكريبت ، مع مساعدة Vue.js من حيث الهيكل ، والكود متاح على جيثب إذا كنت تريد التحقق من ذلك. ويضيف ماتيس: 'كان التحدي الفني الأكبر هو الأداء'. 'تسمح إلمامي بـ HTML و CSS و JavaScript بالنماذج الأولية السريعة للأفكار ، ولكن تحريك الكثير من عناصر DOM يمكن أن يصبح سريعًا ثقيلًا جدًا على المتصفح. سيتم بالتأكيد إنشاء الرسوم المتحركة التالية باستخدام Three.js أو مكتبة مماثلة '.

08. The Magicians الموسم الثاني

تصفح عالم The Magicians الخيالي في هذا الموقع الذي أنشأته الوحدة 9

تصفح عالم The Magicians الخيالي في هذا الموقع الذي أنشأته الوحدة 9

إلى خريطة تفاعلية أخرى ، هذه المرة للعالم الخيالي لبرنامج الخيال التلفزيوني الهيب The Magicians. وكالة المملكة المتحدة الوحدة 9 استخدم فريق المبرمجين التابعين لـ Three.js و WebGL و GLSL لتطوير هذه الخريطة التفاعلية الرائعة ، حيث يمكن للمستخدمين الشروع في المهام واكتشاف المزيد عن الموسم الثاني. من المخلوقات الخيالية إلى الآلهة القديمة ، تعكس كل مهمة أسبوعية موضوع كل حلقة. حتى إذا لم تشاهد العرض ، فإن هذا الاستخدام الشامل للويب ثلاثي الأبعاد لا يزال يستحق الزيارة.

09. السعي وراء الصوت

لعبة ممتعة ومجنونة من استوديو Biborg الفرنسي

لعبة ممتعة ومجنونة من استوديو Biborg الفرنسي

سننتهي بشيء يكون مجرد متعة. تجنب العقبات ، والتقط العناصر ، وأنشئ الموسيقى التصويرية الخاصة بك من خلال تشغيلك الموسيقي المجنون ، في تجربة WebGL المجنونة هذه. يستهدف كل من المستخدم العادي لسطح المكتب / الجوّال وعشاق الواقع الافتراضي (وهو متوافق مع Google Cardboard) ، ويُعد هذا عرضًا رائعًا للوكالة الإبداعية ثلاثية الأبعاد في باريس بيبورغ . في كل مرة تلعبها ، تكون البيئات مختلفة ، وهي تسبب الإدمان للغاية ... حذر من أن!