إضافة تصاميم ثلاثية الأبعاد إلى الويب باستخدام <model-viewer>

في الوقت الحالي، من الشائع أن يحمل الأشخاص في جيوبهم أجهزة متوافقة مع تقنيتَي الواقع المعزّز (AR) والواقع الافتراضي (VR). ويزداد المحتوى ثلاثي الأبعاد الذي نشاركه مع بعضنا البعض على هذه الأجهزة. في هذا الدرس العملي، ستتعلّم كيفية استخدام مكوّن ويب يُسمى <model-viewer> لإضافة محتوى ثلاثي الأبعاد إلى موقعك الإلكتروني أو تطبيق الويب التقدّمي (PWA) بسهولة كما لو كنت تضيف صورة باستخدام HTML.

ما ستنشئه

موقع إلكتروني يتضمّن نموذجًا تفاعليًا ثلاثي الأبعاد مع إمكانية عرض صور ثلاثية الأبعاد في الواقع المعزّز

ما ستتعرّف عليه

  • كيفية تثبيت مكوّن الويب <model-viewer> على موقعك الإلكتروني
  • كيفية استخدام <model-viewer> لعرض تصميم ثلاثي الأبعاد في تخطيط ويب عادي
  • كيفية تخصيص <model-viewer> لإضافة لمسة مميزة إلى العرض التقديمي

المتطلبات

  • متصفّح ويب ننصح باستخدام Chrome، ولكن يمكن استخدام أي متصفّح حديث (Firefox أو Safari أو Edge).
  • Node.js ومحرِّر نصوص، أو إذن الوصول إلى Glitch
  • معرفة أساسية بلغات HTML وCSS وJavaScript وأدوات مطوّري البرامج في Chrome

يركّز هذا الدرس التطبيقي حول الترميز على <model-viewer> والتصاميم الثلاثية الأبعاد. يتم تجاهل المفاهيم وكتل الرموز غير ذات الصلة، ويتم توفيرها لك لنسخها ولصقها ببساطة.

الخيار 1: خلل

يمكنك استخدام أداة تعديل الرموز البرمجية على الإنترنت، مثل Glitch، لاستضافة مشروعك والاطّلاع على التغييرات.

للبدء في Glitch، انقر على الزر التالي:

افتح بيئة Glitch المحمَّلة مسبقًا

من هنا فصاعدًا، يمكنك استخدام أداة تعديل الرموز البرمجية على Glitch لتعديل ملفاتك، وعندما تكون مستعدًا، ابدأ في عرض تطبيقك باستخدام الزر "عرض مباشر". جرِّب ذلك الآن، ومن المفترض أن تظهر لك الصفحة التالية:

الخيار 2: الخادم المحلي

سيسمح لك الخادم المحلي باستخدام أداة تعديل الرموز المفضّلة لديك.

تثبيت الخادم

سنحتاج إلى طريقة لعرض صفحات الويب المحلية. يمكنك استخدام Node.js وserve، وهو خادم بسيط للمحتوى الثابت.

راجِع الموقع الإلكتروني الخاص بـ Node.js للحصول على تعليمات حول كيفية تثبيته على نظام التشغيل. بعد تثبيت Node.js، شغِّل الأمر التالي لتثبيت serve:

npm install -g serve

تنزيل الرمز

يتوفّر نموذج أولي، بالإضافة إلى جميع مواد العرض النموذجية، للتنزيل. انقر على الرابط التالي، وفكّ ضغط المحتوى في الدليل الذي تريد أن يحتوي على مشروعك:

تنزيل رمز المصدر

بدلاً من ذلك، استخدِم git لاستنساخ المستودع:

git clone https://github.com/googlecodelabs/model-viewer-codelab.git

تشغيل الخادم

من دليل النماذج الذي تم استخراجه أعلاه (أو داخل الدليل المستنسخ، إذا كنت تستخدم git)، شغِّل الأمر serve لبدء خادم ويب:

انتقِل إلى هذا العنوان (في لقطة الشاشة أعلاه، العنوان هو http://localhost:5000، ولكن قد يكون مختلفًا على جهازك) للاطّلاع على نقطة بداية بسيطة جدًا:

سنبدأ بتعديل الملف index.html، إما من خلال محرر الويب Glitch أو من خلال محرّر الرموز البرمجية المفضّل لديك إذا كنت تستخدم الخادم المحلي.

إضافة مكتبة <model-viewer>

يجب تضمين مجموعة من ملفات JavaScript لاستخدام <model-viewer>.

يضيف القسم التالي مكتبة <model-viewer> إلى صفحتك. ألصِق الرمز التالي في نهاية <body>.

<!-- 💁 Include both scripts below to support all browsers! -->

<!-- Loads <model-viewer> for modern browsers: -->
<script type="module"
    src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">
</script>

<!-- Loads <model-viewer> for old browsers like IE11: -->
<script nomodule
    src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js">
</script>

لقد أضفنا للتو مكتبات بدون تغيير المحتوى، وإذا أعدت تحميل الصفحة، سيظهر لك المحتوى نفسه. إذا فتحت وحدة تحكّم "أدوات مطوّري البرامج"، قد تظهر لك بعض التحذيرات بشأن عدم توفّر واجهات WebXR API، ولكن من المتوقّع ظهور هذه التحذيرات إلى أن يتم إصدار واجهة برمجة التطبيقات هذه بالكامل.

تحقيق الحد الأقصى من التوافق

يتوافق عنصر <model-viewer> مع العديد من المتصفّحات الحديثة بدون الحاجة إلى أي إعدادات. ومع ذلك، إذا أردت زيادة عدد المتصفّحات التي يمكن أن تتوافق معها صفحتك، يمكنك تضمين إضافات برمجية إضافية.

يمكنك الاطّلاع أدناه على المجموعة الكاملة من الإعدادات المقترَحة. سيساعدك ذلك في تقديم تجربة رائعة على جميع المتصفحات الحديثة. اطّلِع على مستندات عمليات التعبئة المتوافقة مع<model-viewer> للحصول على مزيد من المعلومات.

ألصِق الرمز التالي في <head>.

<!-- The following libraries and polyfills are recommended to maximize browser support -->
<!-- NOTE: you must adjust the paths as appropriate for your project -->
    
<!-- 🚨 REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script>

<!-- 💁 OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 -->
<script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script>

<!-- 💁 OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers -->
<script src="https://unpkg.com/resize-observer-polyfill@1.5.1/dist/ResizeObserver.js"></script>

<!-- 💁 OPTIONAL: Fullscreen polyfill is required for experimental AR features in Canary -->
<!--<script src="https://unpkg.com/fullscreen-polyfill@1.0.2/dist/fullscreen.polyfill.js"></script>-->

<!-- 💁 OPTIONAL: Include prismatic.js for Magic Leap support -->
<!--<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>-->

إضافة <model-viewer>

لنضِف الآن علامة <model-viewer> إلى الصفحة لنتمكّن من رؤية بعض المحتوى الثلاثي الأبعاد. استبدِل العنصر <p> الحالي بالرمز التالي:

<model-viewer src="third_party/Astronaut/Astronaut.glb"
              alt="A 3D model of an astronaut">
</model-viewer>

هناك سمتان فقط يجب ذكرهما هنا:

  • تحدّد السمة src المكان الذي سيتم تحميل التصميم الثلاثي الأبعاد منه. في هذا المثال، استخدمنا نموذج رائد فضاء من Poly تم توفيره بموجب ترخيص CC-BY.
  • تحتوي السمة alt على وصف نصي بديل للنموذج لتسهيل الاستخدام.

قد تلاحظ أنّ كلتا هاتين السمتَين تتشابهان إلى حد كبير مع سمات العلامة img.

ستُظهر إعادة التحميل رائد الفضاء:

أحسنت. لديك تصميم ثلاثي الأبعاد على الويب!


في الخطوات التالية، سنختبر المزيد من التفاعلية والحركة، وسنغيّر مظهر العنصر، وسنستكشف بعضًا من ميزات الواقع المعزّز.

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

لإجراء ذلك، ما عليك سوى إضافة السمتَين auto-rotate وcamera-controls إلى العنصر <model-viewer>. 

<model-viewer src="third_party/Astronaut/Astronaut.glb"
              auto-rotate camera-controls
              alt="A 3D model of an astronaut">
</model-viewer>

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

تمنح هذه الميزات المستخدمين معًا تلميحًا بأنّ هذا ليس مجرد صورة ثابتة، بل إنّها توفّر إحساسًا بالتفاعلية كي يشعروا بأنّهم مشاركون (ولكي يتمكّنوا من رؤية الجزء الخلفي من التصميم الثلاثي الأبعاد).

بعد أن أضفنا بعض الحركة، لنرَ كيف يمكننا تعديل المظهر لجعل النموذج جذابًا حقًا.

تعديل النموذج

ستظهر بعض هذه التغييرات (خاصةً تلك المتعلّقة بالإضاءة) بشكل أفضل مع طُرز معيّنة. لنبدأ بتعديل السمة src لتشير إلى تصميم جديد: third_party/DamagedHelmet/DamagedHelmet.gltf (تم إصداره بموجب رخصة المشاع الإبداعي مع نسب العمل إلى مؤلفه وبدون استخدام تجاري على Sketchfab). يجب أن يظهر مصدر العنصر بأكمله الآن على النحو التالي:

<model-viewer src="third_party/DamagedHelmet/DamagedHelmet.gltf"
              auto-rotate camera-controls
              alt="A 3D model of a damaged sci-fi helmet">
</model-viewer>

سيعرض هذا النموذج بعض التغييرات التي سنُجريها قريبًا.

تغيير لون الخلفية

أولاً، لنغيّر لون الخلفية لجعل النموذج يبرز على الصفحة. أضِف السمة التالية إلى علامتك <model-viewer>:

background-color="#70BCD1"

ضبط خريطة البيئة

تُستخدَم خرائط البيئة لتوفير مشهد محيط ينعكس من النموذج ولتحديد إعدادات الإضاءة. الإضاءة التلقائية ممتازة (ومتوافقة مع إضاءة "عارض المشهد" في ARCore)، ولكن في بعض الأحيان قد تحتاج إلى بيئة مخصّصة أو إضاءة محدّدة للنتائج التي تحاول تحقيقها. لنحدّد السمة environment-image (studio_small_07_1k.hdr مأخوذة من hdrihaven.com).

environment-image="third_party/hdrihaven/studio_small_07_1k.hdr"

إضافة ظل

يؤدي جعل العنصر يلقي بظلاله إلى إضافة عمق إضافي إلى المشهد. عند إضافة السمة التالية إلى العنصر <model-viewer>، سيتم إنشاء ظل:

shadow-intensity="1"

تغيير شدة الإضاءة

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

stage-light-intensity="3" environment-intensity="2"

كان كلّ من هذه التغييرات صغيرًا جدًا، ولكنّ النموذج يبدو أفضل بكثير الآن.

بعد ذلك، سنلقي نظرة على بعض أوضاع العرض البديلة.

يتوفّر الواقع المعزّز (AR) على المزيد والمزيد من الأجهزة. من الصعب تفعيل بعض هذه الأوضاع أو تتطلّب رمزًا خاصًا، ولكن يمكن أن تتعامل <model-viewer> مع كل هذه التعقيدات نيابةً عنك.

‫Scene Viewer من ARCore

على الأجهزة المتوافقة، يمكن أن يؤدي <model-viewer> إلى تشغيل Scene Viewer من ARCore. أضِف السمة ar إلى العنصر <model-viewer>، وهذا كل ما عليك فعله.

<model-viewer src="third_party/DamagedHelmet/DamagedHelmet.gltf"
              ar
              auto-rotate camera-controls
              background-color="#70BCD1"
              shadow-intensity="1"
              alt="A 3D model of a damaged sci-fi helmet">
</model-viewer>

إذا عرضت هذا المحتوى على جهاز متوافق مع إصدار حديث من ARCore، سيظهر لك رمز إضافي (كما في الصورة أدناه). سيؤدي النقر على ذلك إلى فتح النموذج في "مستكشف المشهد".

الأجهزة الأخرى - "نظرة سريعة" على iOS وMagic Leap وWebXR

تتطلّب العديد من الأجهزة الأخرى بعض الخطوات الإضافية.

على أجهزة iOS، تتيح السمة ios-src تحديد إصدار USDZ إضافي للتصميم الثلاثي الأبعاد (وهو أمر مطلوب على أجهزة iOS). عند توفير هذه السمة، سيظهر رمز "الواقع المعزّز" القياسي في "نظرة سريعة" على التصميم ثلاثي الأبعاد على أجهزة iOS المتوافقة. لمزيد من المعلومات حول تنسيق USDZ، يُرجى الاطّلاع على مستندات المطوّرين من Apple.

على أجهزة Magic Leap، ستتيح السمة magic-leap إمكانية استخدام الواقع المعزّز. يُرجى العِلم أنّه يجب أيضًا تضمين مكتبة prismatic.js (وهي مضمّنة، ولكن تم وضع تعليق عليها، في عمليات التعبئة الاختيارية) ويجب أن يكون التصميم الثلاثي الأبعاد ملف ‎ .glb (وليس ‎ .gltf).

<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>

يمكن التحكّم في الزاوية والموضع الأوليَّين للكاميرا. يتيح لنا عنصر التحكّم هذا عرض طريقة عرض تلقائية أفضل للخوذة للمستخدمين. أضِف المقتطف التالي إلى علامة <model-viewer>:

camera-orbit="-20deg 75deg 2m"

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

لقد أدرجنا صفحة نموذجية في مستودعنا. يمكنك تجربة responsive.html في وضع ملء الشاشة (مثل الكمبيوتر):

الصفحة نفسها، ولكن في إطار عرض ضيق (مثل جهاز جوّال):

لقد تضمّنت قطعة من المحتوى الثلاثي الأبعاد في الويب. أحسنت.

ما هي الخطوات التالية؟

تتوفّر العديد من خيارات الإعداد الأخرى. لمزيد من المعلومات، يمكنك الاطّلاع على المستندات على الإنترنت أو الرمز.

بعد تحديد النماذج، إليك بعض الخطوات التالية التي يمكنك التفكير فيها:

  • يمكن أن تكون بعض النماذج كبيرة جدًا. في هذه الحالات، توفّر <model-viewer> عدّة طرق لمواصلة تقديم تجارب ممتازة. تحتوي صفحة المستندات التحميل الكسول على مزيد من المعلومات.
  • يمكن أن تكون النماذج المتحركة ممتعة للغاية. يمكنك الاطّلاع على صفحة الصور المتحركة لمزيد من المعلومات حول تفعيل الصور المتحركة المحدّدة في نماذجك (والتبديل بينها).
  • وهذا لا يزال الويب، إذ يمكن تضمين النماذج في صفحات الويب لتكملة المحتوى.

عملية التطوير لدينا متاحة على GitHub. تسرّنا معرفة رأيك.