簡介
本指南將逐步說明幾種自訂 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 是陣列,可在陣列中加入多個個別章節。
"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 說故事應用程式,可以開始製作自己的故事了。您可以從下列構想開始著手:
- 創作關於家鄉或你造訪過的地點的故事。
- 創作一個故事,描述歷史事件或啟發了您的靈感的人。
- 寫下虛構世界或夢想的故事。
無窮的可能性!因此,請盡情發揮想像力,創造出真正特別的內容。