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

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

البنية التي ستنشئها

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

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

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

المتطلبات اللازمة

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

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

الخيار 1: خلل

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

لبدء استخدام تطبيق Glitch، انقر على الزر التالي:

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

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

الخيار الثاني - الخادم المحلي

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

تثبيت الخادم

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

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

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>

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

زيادة التوافق إلى أقصى حد

يمكن الآن استخدام الكثير من المتصفحات الحديثة مع كل الميزات السابقة. ومع ذلك، إذا كنت تريد زيادة عدد المتصفحات التي يمكن أن تدعمها صفحتك، يمكنك تضمين رموز polyfill إضافية.

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

ألصِق الرمز التالي في <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>-->

إضافة <نموذج-مُشاهد>

لنضيف الآن العلامة <العارض-العارض> الفعلية إلى الصفحة حتى نتمكن من مشاهدة بعض النماذج ثلاثية الأبعاد! استخدِم الرمز التالي بدلاً من عنصر <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 (تم إصداره بموجب ترخيص Creative Commons Attribution-NonCommercial في 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>

سيعرض هذا النموذج بعض التغييرات التي نحن بصدد إجرائها.

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

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

background-color="#70BCD1"

تحديد خريطة البيئة

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

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

إضافة ظل

وبما أنّ الكائن يُلقي ظلالاً، يُعطي المشاهد عمقًا إضافيًا. وعند إضافة السمة التالية إلى العنصر <model-viewer> ، ستُظلِّل عناصر معيّنة:

shadow-intensity="1"

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

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

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

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

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

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

عارض المشهد في ARCore's

على الأجهزة المتوافقة، يمكن لـ <model-viewer> تشغيل ARCore's Scene Viewer. أضف السمة 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، سيظهر لك رمز إضافي (كما في الصورة أدناه). يؤدي النقر على ذلك إلى فتح النموذج في Scene Explorer!

الأجهزة الأخرى، النظرة السريعة في نظام التشغيل iOS وMagic Leap وWebXR

يحتاج العديد من الأجهزة الأخرى إلى المزيد من العمل.

في نظام التشغيل iOS، تسمح السمة ios-src بتحديد إصدار USDZ إضافي من النموذج الثلاثي الأبعاد (المطلوبة على iOS). عند تقديم هذه السمة، سيظهر رمز المظهر السريع المعزّز العادي على الطراز لأجهزة iOS المتوافقة. لمزيد من المعلومات حول USDZ، اطّلِع على وثائق مطوّري البرامج لشركة Apple&#39s.

تتيح ميزة magic-leap تفعيل الأجهزة المزوّدة بميزة الواقع المعزّز على الأجهزة التي تتيح استخدام Magic Leap. وتجدر الإشارة إلى أنه يجب أيضًا تضمين مكتبة prismatic.js (متضمّنة هذه الخاصية ولكن تم التعليق عليها في نماذج polyfill الاختيارية) وأن يكون النموذج الثلاثي الأبعاد ملفًا بتنسيق 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. نود أن نتعرف على أفكارك!