قد تكون إضافة النماذج الثلاثية الأبعاد إلى موقع إلكتروني أمرًا صعبًا، ولكنّ <model-viewer> يسهّل ذلك مثل كتابة رمز HTML.
إنّ إضافة تصاميم ثلاثية الأبعاد إلى موقع إلكتروني ليست سهلة. يتم عرض النماذج الثلاثية الأبعاد بشكل مثالي في عارض يمكنه العمل بشكل متجاوب مع مختلف الأجهزة على جميع المتصفحات بما في ذلك الهواتف الذكية أو أجهزة الكمبيوتر المكتبية أو حتى أجهزة عرض يتم ارتداؤها على الرأس. يجب أن يتيح العارض ميزة "التحسين التدريجي" لتحسين الأداء وجودة العرض. ويجب أن يتوافق مع حالات الاستخدام على جميع الأجهزة، بدءًا من الهواتف الذكية القديمة ذات الإمكانات المحدودة وحتى الأجهزة الأحدث التي تتوافق مع الواقع المعزّز. يجب أن يظل محدثًا بالتقنيات الحالية. ويجب أن يكون عالي الأداء وسهل الاستخدام. ومع ذلك، يتطلب إنشاء مثل هذا العارض مهارات برمجة ثلاثية الأبعاد متخصصة، ويمكن أن يمثل تحديًا لمطوري الويب الذين يرغبون في استضافة نماذجهم الخاصة بدلاً من استخدام خدمة استضافة تابعة لجهة خارجية.
أمّا مكوّن الويب <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>
للحصول على عروض توضيحية للميزات الأكثر تقدّمًا.
وتشمل هذه الميزات إمكانية إضافة
صندوق سماء مسقَط على الأرض،
وإنشاء
نقوش متحركة،
ونقاط فعّالة.