مكوّن الويب

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

Joe Medley
Joe Medley

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

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

ما هو مكوّن الويب؟

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

تتناول هذه المقالة الميزات الخاصة بـ <model-viewer>. إذا كنت مهتمًا بمعرفة المزيد عن مكوّنات الويب، يمكنك البدء من webcomponents.org.

كيف يتحكّم تطبيق "<model-viewer>" في جهازك؟

توضِّح الأمثلة التالية بعض إمكانات <model-viewer>.

التصاميم الثلاثية الأبعاد الأساسية

يمكن تضمين تصميم ثلاثي الأبعاد بسهولة مثل الترميز التالي. من خلال استخدام ملفات glb، سيعمل هذا المكوّن على أي متصفحٍ مهم.

<!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
<!-- Use it like any other HTML element -->
<model-viewer
  id="mv-shark"
   src="shark.glb"
  camera-controls
></model-viewer>

تظهر هذه التعليمة البرمجية على النحو التالي:

إضافة الحركة والتفاعل

توفّر السمتَان auto-rotate وcamera-controls إمكانية التحكّم في الحركة والمستخدمين. هذه ليست السمات الوحيدة المحتملة. اطّلِع على المستندات للحصول على قائمة كاملة بالسمات.

<model-viewer src="shark.glb" auto-rotate camera-controls>

تأخير التحميل باستخدام صور الملصقات

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

<model-viewer src="shark.glb" controls auto-rotate
poster="shark.jpg">

التصميم السريع الاستجابة

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

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

صور متعددة لبدلات الفضاء تمثّل الاستجابة
صور متعددة لبدلات الفضاء تمثّل الاستجابة.

ميزات أخرى

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