افزودن مدل های سه بعدی به یک وب سایت می تواند مشکل باشد. <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> را برای نمایش ویژگی‌های پیشرفته‌تر کاوش کنید. اینها شامل قابلیت افزودن یک skybox زمینی و ایجاد بافت های متحرک و هات اسپات است.