افزودن مدل‌های سه‌بعدی به وب‌سایت می‌تواند دشوار باشد؛ <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 برای صرفه‌جویی در مصرف باتری و چرخه‌های GPU زمانی که مدل قابل‌مشاهده نیست استفاده می‌کند.
استفاده از ویرایشگر شرح‌داده‌شده در بالا برای ایجاد تصویر پوستر باعث می‌شود که آن تصویر تکی با رندر سه‌بعدی مطابقت داشته باشد، حتی زمانی که نسبت ابعادی <model-viewer> به اندازه‌های مختلف صفحه‌نمایش پاسخ می‌دهد.
ویژگی‌های دیگر
برای مشاهده نسخه‌های نمایشی ویژگی‌های پیشرفته‌تر،
مستندات <model-viewer> را کاوش کنید.
این ویژگی‌ها شامل توانایی افزودن
اسکای‌باکس پیش‌بینی‌شده روی زمین،
و ایجاد
بافت‌های پویانمایی‌شده،
و نقاط فعال است.