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