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

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

מבוא

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

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

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

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

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

הפעלה

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

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

דף הכריכה

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

שימוש באפליקציית 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 file:

cameraOptions: הגדרות המצלמה לפרק. (מידע נוסף על המצלמה זוויות)
- position: הפרמטר 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 הוא מערך שיכול להכיל הרבה פרקים נפרדים בתוך המערך.

"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

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

סיכום

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

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

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

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