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

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

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