با <model-viewer> مدل های سه بعدی را به وب اضافه کنید

امروزه رایج است که مردم دستگاه هایی با قابلیت واقعیت افزوده (AR) و واقعیت مجازی (VR) را در جیب خود حمل کنند. به طور فزاینده ای، محتوایی که در این دستگاه ها با یکدیگر به اشتراک می گذاریم سه بعدی است. در این آزمایشگاه کد یاد خواهید گرفت که چگونه از یک مؤلفه وب به نام <model-viewer> برای اضافه کردن محتوای سه بعدی به وب سایت یا برنامه وب پیشرو (PWA) خود به همان راحتی که یک تصویر را با HTML اضافه می کنید، استفاده کنید!

آنچه را که خواهید ساخت

یک وب سایت حاوی یک مدل سه بعدی تعاملی با قابلیت نمایش هولوگرام های واقعیت افزوده

چیزی که یاد خواهید گرفت

  • چگونه کامپوننت وب <model-viewer> را در وب سایت خود نصب کنید
  • نحوه استفاده از <model-viewer> برای ارائه یک مدل سه بعدی در یک طرح وب استاندارد
  • نحوه سفارشی کردن <model-viewer> برای افزودن استعداد به ارائه

آنچه شما نیاز دارید

  • یک مرورگر وب ما Chrome را توصیه می کنیم، اما هر مرورگر مدرن (Firefox، Safari، Edge) کار خواهد کرد.
  • Node.js و یک ویرایشگر متن یا دسترسی به Glitch .
  • دانش اولیه HTML، CSS، جاوا اسکریپت و ابزار توسعه کروم .

این کد لبه روی <model-viewer> و مدل های سه بعدی متمرکز شده است. مفاهیم و بلوک‌های کد غیرمرتبط محو شده‌اند و برای شما ارائه می‌شوند تا به سادگی کپی و جای‌گذاری کنید.

گزینه 1 - اشکال

می توانید از یک ابزار ویرایش کد آنلاین مانند Glitch برای میزبانی پروژه خود و مشاهده تغییرات استفاده کنید.

برای شروع کار در Glitch، روی دکمه زیر کلیک کنید:

محیط Glitch از پیش بارگذاری شده خود را باز کنید

از اینجا به بعد، می‌توانید از ویرایشگر کد در Glitch برای اصلاح فایل‌های خود استفاده کنید و پس از آماده شدن، با استفاده از دکمه «Show Live» سرویس برنامه خود را شروع کنید. اکنون آن را امتحان کنید و باید صفحه زیر را ببینید:

گزینه 2 - سرور محلی

یک سرور محلی به شما امکان می دهد از ویرایشگر کد دلخواه خود استفاده کنید.

سرور را نصب کنید

ما به راهی برای ارائه خدمات به صفحات وب محلی نیاز داریم. یک راه ساده از Node.js و serve است، یک سرور محتوای ثابت ساده.

برای راهنمایی در مورد نحوه نصب آن بر روی سیستم عامل خود، وب سایت Node.js را بررسی کنید. پس از نصب Node.js، این دستور را برای نصب سرویس اجرا کنید:

npm install -g serve

کد را دانلود کنید

یک الگوی شروع به همراه تمام دارایی های نمونه برای دانلود در دسترس است. روی پیوند زیر کلیک کنید و محتویات را در دایرکتوری که می خواهید پروژه خود را در آن قرار دهید، از حالت فشرده خارج کنید:

کد منبع را دانلود کنید

از طرف دیگر، از git برای کلون کردن مخزن استفاده کنید:

git clone https://github.com/googlecodelabs/model-viewer-codelab.git

در حال اجرا سرور

از دایرکتوری الگو استخراج شده در بالا (یا در داخل دایرکتوری کلون شده، اگر از git استفاده کرده اید)، دستور serve را برای راه اندازی وب سرور اجرا کنید:

از آن آدرس دیدن کنید (در تصویر بالا، http://localhost:5000 است، اما ممکن است در دستگاه شما متفاوت باشد) تا یک نقطه شروع بسیار ساده را ببینید:

ما با ویرایش فایل index.html ، یا از طریق ویرایشگر وب Glitch یا - اگر از سرور محلی استفاده می کنید - ویرایشگر کد مورد علاقه خود را شروع می کنیم.

کتابخانه <model-viewer> را اضافه کنید

برای استفاده از <model-viewer> باید مجموعه ای از فایل های جاوا اسکریپت را اضافه کنیم.

بخش زیر کتابخانه <model-viewer> را به صفحه شما اضافه می کند. کد زیر را در انتهای <body> قرار دهید.

<!-- 💁 Include both scripts below to support all browsers! -->

<!-- Loads <model-viewer> for modern browsers: -->
<script type="module"
    src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">
</script>

<!-- Loads <model-viewer> for old browsers like IE11: -->
<script nomodule
    src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js">
</script>

ما به تازگی کتابخانه ها را اضافه کرده ایم، بدون تغییر محتوا - اگر صفحه خود را به روز کنید، همان محتوا را خواهید دید. اگر کنسول DevTools را باز کنید، ممکن است هشدارهایی در مورد از دست دادن API های WebXR مشاهده کنید، اما تا زمانی که آن API به طور کامل منتشر نشود، انتظار می رود.

به حداکثر رساندن سازگاری

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

مجموعه کامل پیشنهادی ما در زیر آمده است. اینها به شما کمک می کند تا از یک تجربه عالی در همه مرورگرهای مدرن پشتیبانی کنید. برای اطلاعات بیشتر به مستندات polyfills <model-viewer> مراجعه کنید.

کد زیر را در <head> قرار دهید.

<!-- The following libraries and polyfills are recommended to maximize browser support -->
<!-- NOTE: you must adjust the paths as appropriate for your project -->
    
<!-- 🚨 REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script>

<!-- 💁 OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 -->
<script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script>

<!-- 💁 OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers -->
<script src="https://unpkg.com/resize-observer-polyfill@1.5.1/dist/ResizeObserver.js"></script>

<!-- 💁 OPTIONAL: Fullscreen polyfill is required for experimental AR features in Canary -->
<!--<script src="https://unpkg.com/fullscreen-polyfill@1.0.2/dist/fullscreen.polyfill.js"></script>-->

<!-- 💁 OPTIONAL: Include prismatic.js for Magic Leap support -->
<!--<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>-->

<model-viewer> را اضافه کنید

حالا بیایید تگ واقعی <model-viewer> را به صفحه اضافه کنیم تا بتوانیم مقداری سه بعدی ببینیم! عنصر <p> موجود را با کد زیر جایگزین کنید:

<model-viewer src="third_party/Astronaut/Astronaut.glb"
              alt="A 3D model of an astronaut">
</model-viewer>

در اینجا فقط دو ویژگی قابل ذکر است:

  • ویژگی src مشخص می کند که مدل سه بعدی از کجا بارگذاری شود. در این مثال، ما از یک مدل فضانورد توسط Poly استفاده کرده‌ایم که تحت مجوز CC-BY در دسترس قرار گرفته است.
  • ویژگی alt شامل یک توصیف متنی جایگزین از مدل برای دسترسی است.

ممکن است متوجه شوید که هر دوی این ویژگی‌ها شباهت‌های قوی با ویژگی‌های تگ img دارند.

بارگذاری مجدد فضانورد را نشان می دهد:

خوب! شما یک مدل سه بعدی در وب دارید!


در مراحل بعدی، تعامل و حرکت بیشتری را آزمایش می کنیم، ظاهر عنصر را تغییر می دهیم و انگشتان پا را در AR فرو می کنیم.

بیایید کمی تعامل به مدل اضافه کنیم. ما مدل را به‌طور پیش‌فرض می‌چرخانیم تا به کاربران اشاره کنیم که مدل تعاملی است (و همچنین برای نشان دادن آن)، و سپس کنترل‌ها را فعال می‌کنیم تا کاربران بتوانند خودشان مدل را با موس یا از طریق لمس حرکت دهند. .

برای انجام این کار، به سادگی ویژگی های auto-rotate و camera-controls را به عنصر <model-viewer> اضافه کنید.

<model-viewer src="third_party/Astronaut/Astronaut.glb"
              auto-rotate camera-controls
              alt="A 3D model of an astronaut">
</model-viewer>

وقتی صفحه را به‌روزرسانی می‌کنید، فضانورد به آرامی در حال چرخش است. اگر سعی کنید مدل را بکشید (یا با کلیک کردن و حرکت دادن ماوس، یا اگر با کشیدن انگشت خود روی یک دستگاه لمسی هستید)، مدل می‌چرخد.

در مجموع، این ویژگی‌ها به کاربر این نکته را می‌دهند که این چیزی بیش از یک تصویر ثابت است، و یک حس تعاملی است، بنابراین آنها احساس می‌کنند درگیر هستند (و بنابراین می‌توانند پشت مدل شما را ببینند!)

اکنون که کمی حرکت داریم، بیایید تغییرات ظاهری را ببینیم تا مدل واقعاً جذاب شود.

مدل را به روز کنید

برخی از اینها (مخصوصاً تغییرات نور) در مدل‌های خاصی به بهترین شکل ظاهر می‌شوند. ابتدا، اجازه دهید ویژگی src را به‌روزرسانی کنیم تا به مدل جدیدی اشاره کنیم: third_party/DamagedHelmet/DamagedHelmet.gltf (منتشر شده تحت مجوز Creative Commons Attribution-NonCommercial در Sketchfab ). منبع کل عنصر اکنون باید بخواند:

<model-viewer src="third_party/DamagedHelmet/DamagedHelmet.gltf"
              auto-rotate camera-controls
              alt="A 3D model of a damaged sci-fi helmet">
</model-viewer>

این مدل برخی از تغییراتی که قرار است ایجاد کنیم را به نمایش می گذارد!

رنگ پس زمینه را تغییر دهید

ابتدا رنگ پس‌زمینه را تغییر می‌دهیم تا مدل در برابر صفحه ظاهر شود. ویژگی زیر را به تگ <model-viewer> خود اضافه کنید:

background-color="#70BCD1"

نقشه محیط را تنظیم کنید

نقشه های محیطی برای ارائه یک صحنه محصور که از مدل منعکس می شود و برای مشخص کردن پیکربندی نور استفاده می شود. نورپردازی پیش‌فرض عالی است (و با نورپردازی Scene Viewer ARCore سازگار است)، اما گاهی اوقات ممکن است یک محیط سفارشی داشته باشید یا ممکن است برای نتایجی که می‌خواهید به آن برسید نیاز به نورپردازی خاص داشته باشید. بیایید ویژگی محیط-تصویر را مشخص کنیم ( studio_small_07_1k.hdr از hdrihaven.com است).

environment-image="third_party/hdrihaven/studio_small_07_1k.hdr"

یک سایه اضافه کنید

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

shadow-intensity="1"

شدت نور را تغییر دهید

مدل کمی تاریک است. بیایید چراغ ها را کمی روشن کنیم تا بتوانیم جزئیات بیشتری را ببینیم. هم نورپردازی پیش‌فرض مرحله و هم نورپردازی نقشه محیطی که اضافه کرده‌ایم را می‌توان به طور مستقل تنظیم کرد. این را اضافه کنید:

stage-light-intensity="3" environment-intensity="2"

هر یک از این تغییرات بسیار کوچک بود، اما مدل در حال حاضر بسیار بهتر به نظر می رسد!

در ادامه، به برخی از حالت‌های نمایش جایگزین نگاه خواهیم کرد.

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

نمایشگر صحنه ARCore

در دستگاه‌های پشتیبانی‌شده، <model-viewer> می‌تواند نمایشگر صحنه ARCore را فعال کند. ویژگی ar را به عنصر <model-viewer> خود اضافه کنید - و بله، این تنها کاری است که باید انجام دهید!

<model-viewer src="third_party/DamagedHelmet/DamagedHelmet.gltf"
              ar
              auto-rotate camera-controls
              background-color="#70BCD1"
              shadow-intensity="1"
              alt="A 3D model of a damaged sci-fi helmet">
</model-viewer>

اکنون اگر این مورد را در یک دستگاه پشتیبانی شده با ARCore اخیر مشاهده کنید، یک نماد اضافی (مانند تصویر زیر) خواهید دید. با کلیک بر روی آن، مدل شما در Scene Explorer باز می شود!

دستگاه‌های دیگر - iOS Quick Look، Magic Leap، WebXR

بسیاری از دستگاه های دیگر به کار بیشتری نیاز دارند.

در iOS، ویژگی ios-src اجازه می دهد تا یک نسخه USDZ اضافی از مدل سه بعدی (که در iOS مورد نیاز است) مشخص شود. وقتی این ویژگی ارائه شد، نماد استاندارد AR Quick Look روی مدل دستگاه‌های iOS پشتیبانی‌شده ظاهر می‌شود. برای اطلاعات بیشتر در مورد USDZ به مستندات توسعه دهنده اپل مراجعه کنید.

در دستگاه‌های Magic Leap، ویژگی magic-leap پشتیبانی AR را فعال می‌کند. توجه داشته باشید که باید کتابخانه prismatic.js را نیز بگنجانید (این مورد در پلی‌فیل‌های اختیاری گنجانده شده، اما توضیح داده شده است) و مدل سه‌بعدی باید یک فایل glb. باشد (نه gltf.).

<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>

زاویه و موقعیت اولیه دوربین قابل کنترل است. این کنترل به ما این امکان را می دهد که نمای پیش فرض بهتری از کلاه ایمنی را به کاربران نشان دهیم. قطعه زیر را به تگ <model-viewer> خود اضافه کنید:

camera-orbit="-20deg 75deg 2m"

البته این مدل ها را می توان با محتوای دیگر شما از جمله در صفحات واکنش گرا استفاده کرد. ساخت یک صفحه وب واکنشگرا فراتر از محدوده این کد لبه است، اما برای اطلاعات بیشتر، اصول طراحی وب واکنشگرا را بررسی کنید.

ما یک صفحه نمونه را در مخزن خود قرار داده ایم. responsive.html را در صفحه عریض (مانند دسکتاپ) بررسی کنید:

همان صفحه، در یک نمای باریک (مانند یک دستگاه تلفن همراه):

شما یک قطعه از محتوای سه بعدی را در وب جاسازی کرده اید! کارت خوب بود!

بعدش چی؟

بسیاری از گزینه های پیکربندی بیشتر وجود دارد. برای اطلاعات بیشتر، اسناد آنلاین یا کد ما را بررسی کنید.

هنگامی که مدل های خود را شناسایی کردید، برخی از مراحل بعدی که ممکن است بخواهید در مورد آنها فکر کنید:

  • برخی از مدل ها می توانند بسیار بزرگ باشند. در این موارد، <model-viewer> چندین روش برای ارائه تجربیات عالی ارائه می دهد. صفحه اسناد بارگیری تنبل اطلاعات بیشتری دارد.
  • مدل های متحرک می توانند واقعا سرگرم کننده باشند! برای اطلاعات بیشتر در مورد فعال کردن (و جابجایی بین) انیمیشن‌هایی که در مدل‌های شما تعریف شده‌اند، صفحه انیمیشن‌های ما را بررسی کنید.
  • و این هنوز هم وب است - مدل هایی را می توان در صفحات وب شما تعبیه کرد تا محتوای شما را تکمیل کند!

فرآیند توسعه ما در GitHub باز است. ما از اینکه ازت خبر داشته باشیم خوشحال میشویم!