3d 敘事手法：自訂指南

簡介

本指南將逐步說明如何自訂 3D 故事解決方案，讓您建立引人入勝的地理位置故事。

您有兩種便利的方法，可以自由設定他們的敘事解決方案。也就是說，您可以使用管理員應用程式提供的直覺化 UI，使用專屬的設定面板。在這個面板中，使用者可以修改整體報導和個別章節的主要屬性，例如 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 地圖平台自動完成搜尋列，找出您想要顯示的地點。

新增位置後，您可以按一下位置旁邊的「Edit」按鈕，在章節中新增詳細資料：

圖片

新增地點詳細資料：

對整體設定感到滿意後，請下載 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：顯示或隱藏位置標記的布林值。

儲存設定

最後，按一下「Save Camera location」(儲存攝影機位置) 來儲存攝影機位置，然後按一下「離開編輯模式」儲存工作進度。

圖片

此應用程式提供容易使用的介面，讓您自訂 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 檔案進一步自訂相機。可定義許多重要變數，例如：

  • 拉迪
  • BASE_PITCH_RADIANS
  • BASE_HEADING_RADIANS
  • BASE_ROLL_RADIANS
  • DEFAULT_HIGHLIGHT_RADIUS

您可以隨意調整這些變數，享受各種不同的攝影天使和體驗。

結論

在本文件中，我們提供了一份指南，說明如何自訂 3D 敘事應用程式。我們探討了管理應用程式提供的各種選項，並探討如何運用這些選項打造引人入勝的沉浸式地理位置故事。另外，我們也討論了使用 config.json 檔案建立自訂故事的程序。後續步驟

現在您已經瞭解如何自訂 3D 敘事應用程式，接下來可以開始打造自己的故事。您可以從下列提案開始著手：

  • 建立故事，介紹家鄉或造訪過的地點。
  • 撰寫歷史事件或為您啟發人物的故事。
  • 創作一篇故事，講述虛構世界或夢想中的夢想。

一切都有無限的可能！所以請盡情發揮想像力 創造獨一無二的產品/服務