الواقع المعزّز مع عارض النموذج

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

ولتحقيق ذلك، وفّرنا ميزتَي "القفزة السحرية" و"النظرة السريعة" على نظام التشغيل iOS. نعلن الآن عن إتاحة الواقع المعزّز على Android مع إضافة السمة ar. تستند هذه السمة إلى ميزة جديدة في ARCore تُسمى Scene Viewer، وهو تطبيق خارجي لعرض التصاميم الثلاثية الأبعاد. للاطّلاع على مزيد من المعلومات حول ميزة "عارض المشهد"، يمكنك الاطّلاع على عرض نماذج ثلاثية الأبعاد في الواقع المعزّز من متصفّح Android.

مسبار المريخ

لنتعرّف الآن على طريقة تنفيذ ميزة "الواقع المعزّز" باستخدام "<model-viewer>".

السمة

لا يتطلب استخدام أحد مكونات الويب، كما قد تتذكر، معرفة خاصة. كما أنّها تعمل مثل عنصر HTML العادي، فهي تحتوي على علامة فريدة، بالإضافة إلى الخصائص والطرق. بعد تثبيتها مع علامة <script>، يمكنك استخدامها مثل أي عنصر HTML آخر.

<model-viewer alt="A 3D model of an astronaut." src="Astronaut.gltf" ios-src="Astronaut.usdz" magic-leap ar>

يبدو هذا مشابهًا إلى حد كبير لما كان لدي في مقالتي السابقة. لاحظ الشيء الذي قمت بتمييزه في النهاية. هذه هي السمة الجديدة.

تثبيت الإصدار الجديد

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

<script type="module"
  src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer.js">
</script>

<script nomodule
  src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer-legacy.js">
</script>

الخلاصة

جرِّب الإصدار الجديد من <model-viewer> وأخبرنا برأيك. نرحب بالمشكلات والملاحظات على GitHub.