واقعیت افزوده با مدل بیننده

در ماه فوریه، مؤلفه وب <model-viewer> را معرفی کردیم، که به شما امکان می‌دهد تا به صورت اعلامی یک مدل سه بعدی را به یک صفحه وب اضافه کنید، در حالی که مدل را در سایت خود میزبانی می‌کنید. یکی از مواردی که آن را پشتیبانی نمی کرد واقعیت افزوده بود. یعنی نمی‌توانید تصویر منبع مؤلفه را در بالای فید دوربین دستگاه رندر کنید.

برای انجام این کار، از آن زمان پشتیبانی از Magic Leap و Quick Look را در iOS اضافه کرده ایم. اکنون ما پشتیبانی از AR را در اندروید با اضافه شدن ویژگی ar اعلام می کنیم. این ویژگی بر روی یک ویژگی جدید ARCore به نام Scene Viewer ساخته شده است، یک برنامه خارجی برای مشاهده مدل های سه بعدی. برای کسب اطلاعات بیشتر درباره 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> را نصب کنید. برای انجام این کار، مطابق شکل زیر شماره نسخه را به آدرس های فایل اضافه کنید. سپس، صفحه انتشارات را برای به روز رسانی تماشا کنید.

<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 استقبال می شود.