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

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

מבוא

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

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

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

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

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

תמונה

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

כשתהיו מרוצים מהתצורה הכוללת, הורידו את קובץ ה-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: פרמטר הכותרת מתייחס לכיוון האופקי שאליו המצלמה מופנית. במונחים גיאוגרפיים, הוא מייצג את הזווית שבין הכיוון של המצלמה לכיוון הצפון. כותרת של 0 מציינת שהמצלמה מצביעה לכיוון צפון.
- pitch: פרמטר גובה הצליל קובע את הזווית האנכית של המצלמה. הוא מציין את ההטיה או הנטייה של שדה הראייה של המצלמה. גובה צליל חיובי מצביע כלפי מטה, וגובה שלילי מצביע כלפי מעלה.
- roll: פרמטר הגלגול מגדיר את הסיבוב מסביב לציר המצלמה. היא מייצגת את תנועת הסיבוב של המצלמה. גלגול 0 מציין שאין סיבוב, וערכים חיוביים או שליליים מציינים סיבוב ימינה או שמאלה, בהתאמה.
focusOptions: אפשרויות להתמקדות בנקודה ספציפית.
focusRadius: רדיוס המיקוד.
showFocus: ערך בוליאני להצגה או להסתרה של מיקוד.
showLocationMarker: ערך בוליאני להצגה או להסתרה של סמן המיקום.

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

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

תמונה

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

קובץ 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

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

סיכום

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

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

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

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