מציאות רבודה בעזרת צופה במודל

בפברואר השקנו את רכיב האינטרנט <model-viewer>, שמאפשר להוסיף באופן דקלרטיבי מודל תלת-ממד לדף אינטרנט, תוך אירוח המודל באתר שלכם. דבר אחד שלא תמך בו היה מציאות רבודה. כלומר, לא ניתן היה ליצור רינדור של תמונת המקור של הרכיב מעל פיד המצלמה של המכשיר.

לשם כך, הוספנו תמיכה ב-Magic Leap וב-Quick Look ב-iOS. עכשיו אנחנו מוסיפים את המאפיין ar כדי להכריז על תמיכה ב-AR ב-Android. המאפיין הזה מבוסס על תכונה חדשה של ARCore שנקראת Scene Viewer, אפליקציה חיצונית לצפייה במודלים תלת-ממדיים. למידע נוסף על 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>. כדי לעשות זאת, מוסיפים את מספר הגרסה לכתובות ה-URL של הקבצים, כפי שמתואר בהמשך. לאחר מכן, עיינו בדף פריטי התוכן כדי לראות עדכונים.

<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.