התאמה אישית של סיפורים בתלת-ממד

מבוא

במדריך הזה נסביר על הדרכים השונות להתאים אישית את הפתרון "סיפורים ב-3D", כדי שתוכלו ליצור סיפורים מרתקים על מיקומים גיאוגרפיים.

יש לכם שתי שיטות נוחות להגדיר את פתרון הסיפורים שלהם. קודם כול, אתם יכולים להשתמש בממשק המשתמש האינטואיטיבי שזמין באפליקציה לשותפים, שכולל לוח הגדרות ייעודי. בחלונית הזו המשתמשים יכולים לשנות את המאפיינים העיקריים, כמו imageUrl,‏ title,‏ date ועוד, גם של הסטורי כולו וגם של פרקים ספציפיים.

בנוסף, אפשר לשנות את ההגדרות של המצלמה ואת אפשרויות הפוקוס לכל פרק באמצעות ממשק המשתמש הגרפי באפליקציית Admin. אחרי שמשתמשים מרוצים מההגדרה, הם יכולים להוריד את קובץ ה-JSON שנוצר.

אפשר גם לערוך ישירות את קובץ ה-JSON. אתם יכולים לשנות את מבנה ה-JSON, לטעון את פתרון סיפור המותג שהגדרתם ולעקוף את לוח הבקרה של Admin. הגישה הכפולה הזו מציעה גם ממשק ידידותי למשתמש וגם מניפולציה מתקדמת של JSON.

תחילת העבודה:

הפעלה

יצירת סיפור משלכם

הפריסה הכוללת של הסיפור מחולקת לסיפור שער ואחריו פרקים. אפשר להתאים אישית גם את השער וגם כל פרק בנפרד. כדאי לעיין
בפרטים על האופן שבו אפשר ליצור ולהתאים אישית את הסיפורים באמצעות אפליקציה לשותפים וגם באמצעות קובץ תצורה.

דף הכריכה

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

שימוש באפליקציה לשותפים

קודם כל, מוסיפים דף שער לסטורי. כדי לעשות את זה, משתמשים במסך הבא באפליקציה לשותפים:

תמונה

שימוש ב-config.json

בנוסף, אם יש לכם את קובץ התצורה, אתם יכולים להוסיף את הקטעים האלה ישירות לקובץ:

  • 1. ‫imageUrl: כתובת ה-URL של קובץ המדיה הראשי (תמונה, GIF או סרטון) של הסיפור כולו.

זו יכולה להיות כל כתובת URL שגלויה לכולם ומפנה לקובץ תמונה, GIF או וידאו שרוצים להשתמש בו כמדיה הראשית של כל הסטורי.

  • 2. ‫title: שם הסיפור כולו.
  • 3. ‫date: התאריך או מסגרת הזמן שמשויכים לכתבה.
  • 4. ‫description: תיאור קצר של הכתבה.
  • 5. ‫createdBy: היוצר או המחבר של הסטורי.
  • 6. ‫imageCredit: קרדיט על התמונה הראשית.
  • 7. cameraOptions: הגדרות המצלמה הראשוניות לכל הסיפור.

פרקים

הסיפור מחולק לפרקים, ולכל פרק יש קבוצה משלו של משתנים. אתם יכולים ליצור כמה פרקים שתרצו. מתחילים בבחירת כתובת ומוסיפים את הפרטים הבאים לפרק.

שימוש באפליקציה לשותפים

חיפוש מיקום: משתמשים בסרגל החיפוש המשולב של ההשלמה האוטומטית בפלטפורמה של מפות Google כדי למצוא את המיקום שרוצים להציג.

אחרי שמוסיפים מיקום, אפשר להוסיף פרטים לפרק באמצעות לחיצה על הלחצן עריכה לצד המיקום:

תמונה

מוסיפים פרטים על המיקום:

אחרי שאתם מרוצים מההגדרות האישיות הכוללות, אתם יכולים להוריד את קובץ ה-JSON ולהשתמש בו באפליקציית ההדגמה.

הגדרה באמצעות config.json

כדי להתאים אישית כל פרק, אתם יכולים לערוך את המשתנים הבאים ישירות בקובץ config.json שהורדתם:

  • ‫title: שם הפרק.
  • ‫id: מזהה ייחודי של הפרק.
  • ‫imageUrl: כתובת ה-URL של התמונה של הפרק.
  • ‫imageCredit: קרדיט על התמונה של הפרק.
  • ‫content: תוכן הטקסט של הפרק.
  • ‫dateTime: תאריך או מסגרת זמן ספציפיים לפרק.
  • ‫coords: קואורדינטות של המיקום שמשויך לפרק.
    • ‫lat: קו רוחב.
    • ‫lng: קו אורך.
  • ‫address: כתובת שקשורה לפרק.

הגדרות המצלמה

האפליקציה מספקת הרבה אמצעי בקרה שונים במצלמה. בקטע הזה נסביר על ההגדרות השונות של המצלמה ואיך להתאים אותן אישית.

תמונה

(הזזה, שינוי מרחק התצוגה והטיה של המצלמה כדי לקבל את זווית הצפייה המושלמת)

שימוש באפליקציה לשותפים

מצלמה: משנים את מהירות התנועה של המצלמה ואת סוג המסלול כדי ליצור את חוויית הצפייה הרצויה.

  • סמן מיקום מאפשר להציג או להסתיר סיכה במיקום ספציפי.

  • מיקוד ברדיוס יוצר צללית מסביב לאזור ספציפי בלי להצביע על מיקום ספציפי. האפשרות הזו מצוינת להצגת שכונה או אזור כללי.

תמונה

בסרטון הזה מוסבר איך לשנות את המיקוד של המצלמה כדי להציג אזור מסוים במקום נקודה ספציפית.

שימוש ב-config.json

אפשר גם להתאים אישית את כל הפרמטרים של המצלמה ישירות באמצעות קובץ התצורה בפורמט JSON:

  • cameraOptions: הגדרות המצלמה של הפרק. (מידע נוסף על זוויות צילום)

    • ‫position: פרמטר המיקום קובע את הקואורדינטות המרחביות של המצלמה בסביבה התלת-ממדית. הוא מורכב משלושה ערכים: x,‏ y ו-z. כל קואורדינטה מייצגת נקודה בציר ה-X, בציר ה-Y ובציר ה-Z, ומגדירה את מיקום המצלמה.

    • ‫heading: פרמטר הכותרת מתייחס לכיוון האופקי שאליו המצלמה מכוונת. מבחינה גיאוגרפית, הוא מייצג את הזווית בין שדה הראייה של המצלמה לבין הכיוון צפונה. כיוון של 0 מציין שהמצלמה פונה לכיוון צפון.

    • ‫pitch: פרמטר הזווית האנכית קובע את הזווית האנכית של המצלמה. הוא מציין את ההטיה או השיפוע של תצוגת המצלמה. ערך חיובי של עלרוד מצביע כלפי מטה, וערך שלילי מצביע כלפי מעלה.

    • ‫roll: פרמטר הגלגול מגדיר את הסיבוב סביב הציר של המצלמה. הוא מייצג את תנועת הסיבוב של המצלמה. הערך 0 מציין שלא בוצע סיבוב, וערכים חיוביים או שליליים מציינים סיבוב ימינה או שמאלה, בהתאמה.

  • ‫focusOptions: אפשרויות להתמקדות בנקודה ספציפית.

  • ‫focusRadius: הרדיוס של המיקוד.

  • ‫showFocus: ערך בוליאני להצגה או להסתרה של המיקוד.

  • ‫showLocationMarker: ערך בוליאני להצגה או להסתרה של סמן המיקום.

שמירת ההגדרות האישיות

בסיום, לוחצים על שמירת מיקום המצלמה כדי לשמור את מיקום המצלמה, ואז לוחצים על יציאה ממצב עריכה כדי לשמור את העבודה.

תמונה

האפליקציה הזו מספקת ממשק ידידותי למשתמש שמאפשר להתאים אישית את חוויית התלת-ממד. זו האפליקציה לשותפים.

קובץ ההגדרות הסופי config.json

קובץ התצורה config.json הסופי מכיל את כל המידע שנדרש כדי ליצור חוויית סיפור מותאמת אישית. הוא כולל את פרטי דף השער, הפרקים והגדרות המצלמה. אתם יכולים להשתמש בקובץ הזה כדי לשפר את הסטורי ולוודא שהוא נראה ומרגיש בדיוק כמו שאתם רוצים.

כדי להתחיל,מורידים את הקובץ config.json מהאפליקציה לשותפים או יוצרים קובץ חדש מאפס. אחר כך פותחים את הקובץ בכלי לעריכת טקסט ומתחילים לערוך את הערכים. אתם יכולים לשנות את הטקסט, התמונות ואפילו את הגדרות המצלמה כדי ליצור חוויה ייחודית וסוחפת לקהל שלכם.

קובץ JSON של סקירת סיפור יכול להיראות כך:

{
  "properties": {
    "imageUrl": "https://storage.googleapis.com/gmp-3d-tiles-storytelling/assets/images/317-300x160.jpg",
    "title": "Title",
    "date": "1967",
    "description": ""his is where you put descriptions",
    "createdBy": "Add author",
    "imageCredit": "Add image credit",
    "cameraOptions": {
      "position": {
        "x": -2708127.031960028,
        "y": -4260747.583520751,
        "z": 3886346.825328216
      },
      "heading": -1.5708,
      "pitch": -0.785398,
      "roll": 0
    }
  }

פרק ספציפי יכול להיראות כך. הפרקים הם מערך שיכול להכיל הרבה פרקים נפרדים.

"chapters": [
    {
      "title": "The Jimmy Hendrix Experience",
      "id": 4,
      "imageUrl": "https://storage.googleapis.com/gmp-3d-tiles-storytelling/assets/images/401-300x160.jpg",
      "imageCredit": "Hunter",
      "content": "XYZZZ",
      "dateTime": "Aug 10-12 1967",
      "coords": {
        "lat": 37.7749,
        "lng": -122.4194
      },
      "address": "The Filmore | 1805 Geary Blvd",
      "cameraOptions": {
        "position": {
          "x": -2706472.5713478313,
          "y": -4261528.277488908,
          "z": 3885143.750529967
        },
        "heading": 0,
        "pitch": 0,
        "roll": 0
      },
      "focusOptions": {
        "focusRadius": 3000,
        "showFocus": false,
        "showLocationMarker": true
      }
    },

התאמות אישיות מתקדמות

אתם יכולים להתעמק בקוד ולבצע כמה התאמות אישיות נוספות:

טעינת קובץ תצורה ממיקום אחר

כברירת מחדל, הפתרון טוען את הגדרת סיפור המותג מקובץ מקומי . עם זאת, אפשר לשנות את זה בקלות ב-config.js:

export async function loadConfig(configUrl) {
  try {
    // Fetch the configuration data from the specified URL.
    const configResponse = await fetch(configUrl);

הגדרות המצלמה

אפשר להתאים אישית את המצלמה באמצעות הקובץ /utils/cesium.js. הוא מגדיר מספר משתנים חשובים, כמו:

  • RADIUS
  • BASE_PITCH_RADIANS
  • BASE_HEADING_RADIANS
  • BASE_ROLL_RADIANS
  • DEFAULT_HIGHLIGHT_RADIUS

אתם יכולים לשנות את המשתנים האלה כדי לקבל זוויות צילום וחוויות שונות.

סיכום

במסמכים האלה אנחנו מסבירים איך להתאים אישית את אפליקציית "סיפור המותג בתלת-ממד". בדקנו את האפשרויות השונות שזמינות באפליקציה לשותפים ואיך אפשר להשתמש בהן כדי ליצור סיפורים מרתקים ומעניינים שמבוססים על מיקום גיאוגרפי. דיברנו גם על התהליך של יצירת סיפור בהתאמה אישית באמצעות הקובץ config.json. השלבים הבאים

עכשיו, אחרי שלמדתם איך להתאים אישית את אפליקציית "סיפורים בתלת-ממד", אתם יכולים להתחיל ליצור סיפורים משלכם. הנה כמה רעיונות שיעזרו לכם להתחיל:

  • תצור סיפור על העיר שבה נולדת או על מקום שביקרת בו.
  • ליצור סיפור על אירוע היסטורי או על אדם שהיווה השראה עבורכם.
  • כתוב סיפור על עולם בדיוני או על חלום שחלמת.

האפשרויות הן אינסופיות. תנו לדמיון שלכם להשתולל וצרו משהו מיוחד באמת.