דף זה תורגם על ידי Cloud Translation API.

חדש: 1.1

מודלים תלת-ממדיים לדף האינטרנט שלך באותה קלות כמו כתיבת HTML.

ג'ו מדלי

רוב קוכמן

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

מה חדש מאז השנה שעברה?

גרסה 1.1 כוללת תמיכה מובנית במציאות רבודה (AR) באינטרנט, שיפורים במהירות ובאמינות, ועוד תכונות נדרשות לעיתים קרובות.

מציאות רבודה

זה נהדר לצפות במודל תלת-ממדי על קנבס ריק, אבל הרבה יותר כיף לצפות בו במרחב שלכם. בדפדפנים בתלת-ממד וב-AR, Chrome תומך באופן מלא במציאות רבודה באמצעות WebXR .

הדגמה של יכולת ה-AR <model-viewer>.

כשהוא יהיה מוכן, תוכלו להשתמש בו על ידי הוספת מאפיין ar לתג <model-viewer>. מאפיינים אחרים מאפשרים לכם להתאים אישית את חוויית WebXR AR, כפי שמוצג בדוגמה של WebXR ב-modelviewer.dev. דוגמת הקוד שבהמשך ממחישה איך זה עשוי להיראות.

<model-viewer src="Chair.glb"
  ar ar-scale="auto"
  camera-controls
  alt="A 3D model of an office chair.">
</model-viewer>

הוא נראה בערך כמו הסרטון המוטמע שמוצג מתחת לכותרת הזו.

אמצעי בקרה למצלמה

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

הערות

אפשר גם להוסיף הערות למודלים באמצעות HTML ו-CSS. הרבה פעמים משתמשים ביכולת הזו כדי 'לצרף' תוויות לחלקים מהמודל באופן שזז עם המודל בזמן ביצוע השינוי. ההערות ניתנות להתאמה אישית, כולל המראה שלהן ומידת ההסתרה שלהן על ידי המודל. ההערות פועלות גם ב-AR.

<style>
  button{
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    border: 3px solid blue;
    background-color: blue;
    box-sizing: border-box;
  }

  #annotation{
    background-color: #dddddd;
    position: absolute;
    transform: translate(10px, 10px);
    border-radius: 10px;
    padding: 10px;
  }
</style>
<model-viewer src="https://modelviewer.dev/assets/ShopifyModels/ToyTrain.glb" alt="A 3D model of a Toy Train" camera-controls>
  <button slot="hotspot-hand" data-position="-0.023 0.0594 0.0714" data-normal="-0.3792 0.0004 0.9253">
    <div id="annotation">Whistle</div>
  </button>
</model-viewer>

למידע נוסף, קראו את דף התיעוד של ההערות.

עריכה

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

רינדור ושיפורי ביצועים

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

<model-viewer camera-controls
              skybox-image="spruit_sunrise_1k_HDR.hdr"
              alt="A 3D model of a well-worn  helmet"
              src="DamagedHelmet.glb"></model-viewer>

יציבות

מכיוון ש-<model-viewer> מגיע לגרסה הראשית הראשונה שלו, יציבות ה-API חשובה מאוד, לכן יש להימנע משינויי תוכנה שעלולים לגרום לכשלים עד להפצה של גרסה 2.0.

מה השלב הבא?

גרסה 1.0 של <model-viewer> כוללת את היכולות המבוקשות ביותר, אבל הצוות עדיין לא סיים להשתמש בו. יתווספו עוד תכונות וגם שיפורים בביצועים, ביציבות, בתיעוד ובכלים. אם יש לכם הצעות, תוכלו לדווח על בעיה ב-GitHub. בנוסף, אנשי יחסי ציבור תמיד מוזמנים. כדי להישאר מחוברים, אפשר לעקוב אחרי <model-viewer> ב-Twitter ולעיין בצ'אט של הקהילה ב-Spectrum.