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

מבוא

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

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

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

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

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

הפעלה

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

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

דף הכריכה

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

שימוש באפליקציית Admin

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

תמונה

שימוש בקובץ config.json

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

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

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

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

פרקים

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

שימוש באפליקציית Admin

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

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

תמונה

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

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

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

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

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

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

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

תמונה

(מזיזים, מגדילים ומטים את המצלמה כדי לקבל את זווית הצילום המושלמת)

שימוש באפליקציית Admin

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

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

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

תמונה

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

שימוש בקובץ config.json

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

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

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

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

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

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

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

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

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

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

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

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

תמונה

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

קובץ config.json הסופי

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

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

קובץ 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 הוא מערך שיכול להכיל הרבה פרקים נפרדים בתוך המערך.

"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

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

סיכום

במסמכים האלה צירפנו מדריך להתאמה אישית של אפליקציית 3D Storytelling. בדקנו את האפשרויות השונות שזמינות באפליקציית Admin ואת הדרכים שבהן אפשר להשתמש בהן כדי ליצור סיפורים עשירים ומעניינים עם מיקום גיאוגרפי. דיברנו גם על תהליך היצירה של סיפור בהתאמה אישית באמצעות הקובץ config.json. השלבים הבאים

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

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

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