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

מבוא

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

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

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

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

תחילת העבודה

הפעלה

• Photorealistic 3D tiles API
• Places API

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

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

דף הכריכה

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

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

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

שימוש ב-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: הפרמטר pitch קובע את הזווית האנכית של המצלמה. הוא מציין את ההטיה או השיפוע של זווית הצילום של המצלמה. ערך חיובי של עלרוד מצביע כלפי מטה, וערך שלילי מצביע כלפי מעלה.

  • ‫roll: הפרמטר 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. השלבים הבאים

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

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

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