簡介
本指南將逐一說明 3D 故事述說解決方案的用途 ,您可以製作引人入勝的地理位置報導。
您只要提供兩種解決方案,就能靈活設定述說故事的解決方案 。別擔心,您可以使用 管理應用程式,顯示專屬的設定面板。在這個面板中,使用者可以 修改主要屬性,例如 imageUrl、標題、日期等 包括整體故事和個別章節
第二,你可以調整相機設定和對焦選項 本節。確認設定無誤後 使用者可以選擇下載產生的 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
:heading 參數是指 鏡頭對準的目的地。以地理區域來說,這個詞代表 相機視角與北方方向之間的角度。標題 0 表示攝影機指向朝北。pitch
:俯仰參數會決定 相機上代表相機視角的傾斜或傾斜角度。A 罩杯 正面的提案下降,正面下降。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 故事述說應用程式後 可以開始建立自己的故事您可以從下列構想開始著手:
- 為您家鄉或造訪過的地點創作故事。
- 創作一個故事,描述歷史事件或啟發了您的靈感的人。
- 寫下虛構世界或夢想的故事。
一切都有無限的可能!盡情發揮想像力 那是很特別的事