3d 敘事手法:自訂指南

簡介

本指南將逐一說明 3D 故事述說解決方案的用途 ,您可以製作引人入勝的地理位置報導。

您只要提供兩種解決方案,就能靈活設定述說故事的解決方案 。首先,您可以使用「管理」應用程式提供的直覺式使用者介面,其中提供專屬的設定面板。在這個面板中,使用者可以修改整體故事和個別章節的主要屬性,例如 imageUrl、標題、日期等。

其次,您可以使用管理應用程式中的 GUI,為每個章節微調相機設定和聚焦選項。設定完成後,使用者可以選擇下載產生的 JSON 檔案。

您也可以直接編輯 JSON 檔案。 您可以調整 JSON 結構、載入設定好的敘事解決方案 略過管理控制台這個雙重方法提供使用者友善介面和進階 JSON 操作。

開始使用:

啟用

創作屬於你的故事

故事的整體版面配置會分為封面/封底故事,後面接著章節。 封面和章節都可以個別自訂。請參閱
詳細說明,瞭解如何使用管理員應用程式和設定檔建構及自訂故事。

封面

首先,你必須建立整體的封面頁面 故事這樣一來,故事就會加入簡介、封面相片和說明。

使用「管理」應用程式

首先,請新增短片故事的封面頁面。您可以透過「管理員」應用程式,使用下列畫面執行這項操作:

圖片

使用 config.json

此外,如果您有設定檔,可以直接在 檔案:

  • 1. imageUrl:整個短片的主要媒體檔案 (圖片、GIF 或影片) 網址。

這可以是任何可公開存取的網址,指向您要用於整個短片的主要媒體,例如圖片、GIF 或影片檔。

  • 2. title:整個故事的標題。
  • 3. date:與故事相關聯的日期或時間範圍。
  • 4. description:故事的簡短說明。
  • 5. createdBy:故事的創作者或作者。
  • 6. imageCredit:主要圖片的版權資訊。
  • 7. cameraOptions:整個短片故事的初始相機設定。

章節

故事分為多個章節,每個章節都有一組各自的變數。你可以視需要建立任意數量的章節。首先選取地址,然後在章節中新增下列詳細資料。

使用「管理」應用程式

地點搜尋:使用整合的 Google 地圖平台自動完成搜尋功能 ,找出要顯示的地點。

新增地點後,只要按一下地點旁的「編輯」按鈕,即可為章節新增詳細資料:

圖片

新增地點詳細資料:

確定整體設定無誤後,請下載 JSON 檔案,然後在示範應用程式中使用。

使用 config.json 進行設定

您可以直接在下載的 config.json 檔案中編輯下列變數,自訂各章節:

  • title:該章節的標題。
  • id:該章節的專屬 ID。
  • imageUrl:章節圖片的網址。
  • imageCredit:章節圖片的出處。
  • content:章節的文字內容。
  • dateTime:章節的日期或時段。
  • coords:與章節相關聯的位置座標。
    • lat:緯度。
    • lng:經度。
  • address:與章節相關的地址。

相機設定

應用程式會在相機上提供許多不同的控制項。本節將說明各種相機設定,以及如何自訂設定。

圖片

(平移、縮放及傾斜鏡頭,取得最佳視角)

使用「管理」應用程式

攝影機:調整攝影機移動速度和軌道類型, 以及選擇的觀看體驗

  • 「位置標記」則能讓您切換顯示特定圖釘的位置 或是隱藏該資訊

  • 半徑焦點:在特定區域周圍建立暈影陰影,而沒有 確定特定位置。這類地圖很適合用來展示社區或一般區域。

圖片

以下示範如何變更相機的焦點,以顯示區域而非 或特定點。

使用 config.json

您也可以使用 JSON 設定直接自訂所有相機參數 檔案:

  • cameraOptions:章節的相機設定。(進一步瞭解攝影機角度)

    • position:位置參數會決定相機在 3D 環境中的空間座標。其中包含三個值:x、y 和 z。每個座標都代表 x、y 和 z 軸中的一個點,用於定義相機的位置。

    • heading:標頭參數是指攝影機指向的水平方向。以地理區域來說,這個詞代表 相機視角與北方方向之間的角度。標題 0 表示攝影機指向朝北。

    • pitch:傾斜參數可決定相機的垂直角度。代表相機視圖的傾斜或傾斜度。正值傾斜角度朝下,負值傾斜角度則朝上。

    • roll:滾動參數會定義相機鏡頭的旋轉角度 代表攝影機的扭轉動作。0 顆星 表示沒有旋轉,正值或負值則代表 然後分別旋轉向左或向右旋轉

  • focusOptions:聚焦特定點的選項。

  • focusRadius:聚焦的半徑。

  • showFocus:用來顯示或隱藏焦點的布林值。

  • showLocationMarker:用來顯示或隱藏位置標記的布林值。

儲存設定

最後,按一下「儲存攝影機位置」儲存攝影機位置,然後按一下「離開編輯模式」儲存工作

圖片

這個應用程式提供容易使用的介面,可用來自訂 享受 3D 效果這是「管理員」應用程式。

最終的 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

歡迎調整這些變數,取得各種相機角度和體驗。

結論

本文件提供一份指南,說明如何自訂 3D 故事述說 應用程式。我們探索了管理應用程式提供的各種選項, 如何透過這些地圖,創造出讓人身歷其境且引人入勝的地理位置報導。三 也討論了使用 config.json 建立自訂故事的程序 檔案。後續步驟

瞭解如何自訂 3D 故事述說應用程式後 可以開始建立自己的故事您可以從下列構想開始著手:

  • 為您家鄉或造訪過的地點創作故事。
  • 創作關於歷史事件或啟發你創作靈感的人物的故事。
  • 創作虛構世界或夢境的故事。

一切都有無限的可能!盡情發揮想像力 那是很特別的事