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

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

מבוא

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

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

פרקים

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

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

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

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

תמונה

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

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

רדיוס
BASE_PITCH_RADIANS
BASE_HEADING_RADIANS
BASE_ROLL_RADIANS
DEFAULT_HIGHLIGHT_RADIUS

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

סיכום

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

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

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

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