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

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

מבוא

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

יש לכם גמישות להגדיר את הפתרון שלהם לספרת סיפורים בשתי שיטות נוחות. קודם כול, אפשר להשתמש בממשק המשתמש האינטואיטיבי שזמין באפליקציית 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: הפרמטר position קובע את הקואורדינטות המרחביות של המצלמה בסביבת התלת-ממד. הוא מורכב משלושה ערכים: x,‏ y ו-z. כל קואורדינטה מייצגת נקודה בצירים x,‏ y ו-z, שמגדירה את המיקום של המצלמה.
- heading: הפרמטר heading מתייחס לכיוון האופקי שאליו המצלמה פונה. במונחים גיאוגרפיים, הוא מייצג את הזווית בין שדה הראייה של המצלמה לכיוון צפון. כיוון של 0 מציין שהמצלמה פונה צפונה.
- pitch: הפרמטר pitch קובע את הזווית האנכית של המצלמה. הוא מציין את ההטיה של זווית המצלמה. שיפוע חיובי מצביע כלפי מטה, בעוד ששיפוע שלילי מצביע כלפי מעלה.
- roll: הפרמטר 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": [
    {
      "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, תוכלו להתחיל ליצור סיפורים משלכם. ריכזנו כאן כמה רעיונות שיעזרו לכם להתחיל:

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

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