3D 述說故事:使用編輯器建立故事
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
準備好製作引人入勝的 3D 故事,帶領觀眾暢遊真實世界中的地點嗎?本指南將說明如何使用內建編輯器建立新故事。
使用直覺式介面調整標題、說明、圖片和攝影機角度。非常適合新手!
開啟精選故事編輯器
3D 故事述說解決方案內建編輯器,可供您透過 UI 製作故事
編輯器位於頁面左側,點選這個小圖示即可開啟:

如要存取編輯器,請前往代管版本
3D Storytelling 管理應用程式,或從 GitHub 下載並安裝自己的 Storytelling 執行個體。
建立封面
使用「故事詳細資料」部分設定標題、圖片、說明和其他詳細資料。讓觀眾瞭解短片故事的內容。

新增章節
每個章節就像旅途中的停靠站。新增方式如下:
使用內建的自動完成搜尋列搜尋地點。
新增地點後,只要按一下地點旁的「編輯」按鈕,即可為章節新增詳細資料:

按一下「編輯」,即可輸入章節的標題、說明、圖片和日期。

如要刪除特定章節,請按一下「編輯」按鈕正下方的「刪除」按鈕。
你可以使用左側的虛線圖示拖曳並移動章節,重新排序:

儲存章節
如要儲存特定章節,只要按一下「離開編輯模式」按鈕即可。
「離開編輯模式」按鈕會做為儲存按鈕。

自訂攝影機設定
你可以自訂不同的攝影機設定:

這段影片說明如何透過進階相機選項打造個人化體驗。
自訂攝影機位置:使用簡單的攝影機控制選項,微調要顯示的特定攝影機角度:
傾斜:從上方或地面層級查看地圖。按住 Control 鍵 (或部分電腦上的 Cmd 鍵),同時使用滑鼠點選並向上或向下拖曳。
旋轉:旋轉地圖,即可查看 360 度全景。按住 Control 鍵 (或部分電腦上的 Cmd 鍵),同時使用滑鼠點選並向左或向右拖曳。
縮放:放大或縮小畫面。使用滑鼠滾輪或熟悉的放大/縮小手勢。
你可以嘗試結合傾斜、旋轉和縮放功能,為每個位置找出最合適的角度。控制方式可能因電腦設定而略有不同。

瞭解如何控制 3D 畫布,取得最佳攝影機角度。
完成並下載
建構故事和章節後,即可下載設定。
按一下「下載」,即可取得 JSON 格式的自訂設定。

您可以從 GitHub 分叉程式碼,使用這項設定建立自己的 3D 故事。
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2025-08-27 (世界標準時間)。
[null,null,["上次更新時間:2025-08-27 (世界標準時間)。"],[[["\u003cp\u003eCreate immersive 3D stories with real-world locations using the built-in editor to customize titles, descriptions, images, and camera angles for a captivating user journey.\u003c/p\u003e\n"],["\u003cp\u003eEasily add chapters to your story by searching for locations, providing details such as titles, descriptions, and images, and reordering them as needed.\u003c/p\u003e\n"],["\u003cp\u003eFine-tune the camera settings for each chapter by controlling the tilt, rotate, and zoom to achieve the perfect perspective and enhance the visual experience.\u003c/p\u003e\n"],["\u003cp\u003eDownload the story configuration in JSON format once finalized to integrate it with the 3D Storytelling solution and share it with your audience.\u003c/p\u003e\n"],["\u003cp\u003eAccess the 3D Storytelling Admin app either through the hosted version or by downloading the code from GitHub to get started building your stories.\u003c/p\u003e\n"]]],["The core process involves creating a 3D story using the built-in editor, accessible via a hosted app or downloaded code. Users set story details, add chapters by searching locations, and customize chapter elements like titles, descriptions, images, and dates. Chapters can be reordered and deleted. Camera settings are adjustable, including showing/hiding markers, displaying a radius, and fine-tuning the view via tilt, rotate, and zoom. Finally, the complete story configuration is downloadable as a JSON file.\n"],null,["Ready to create captivating 3D stories that take viewers on a journey through\nreal-world locations? This guide will show you how to build a new story using\nthe built-in editor.\n\nUse our intuitive interface to adjust titles, descriptions, images, and camera\nangles. It's perfect for beginners!\n| **Use the hosted** [3D Storytelling Admin app](https://js-3d-storytelling-admin-t6a6o7lkja-uc.a.run.app/)\n|\n| Or\n| [Get an API Key](https://console.cloud.google.com/google/maps-apis/credentials?utm_source=3d_solutions_storytelling). and **download** the code from [GitHub](https://github.com/googlemaps-samples/js-3d-storytelling).\n\nOpen the story editor\n\nThe 3D Storytelling solution comes with a built-in Editor which lets you to\nbuild the story from the UI\n\nThe editor is on the left side of the page. Open by clicking this small icon:\n\nYou can access the editor by visiting the hosted version\n[3D Storytelling Admin app](https://goo.gle/3d-storytelling-admin) or by\ndownloading and installing your own Storytelling instance from [GitHub](https://github.com/googlemaps-samples/js-3d-storytelling)\n\nCreate the cover page\n\nUse the \"Story details\" section to set a title, image, description, and other\ndetails. This introduces your story to the viewer.\n\nAdd chapters\n\nEach chapter is like a stop on your journey. Here's how to add them:\n\n1. Search for a location using the built-in Autocomplete search bar.\n\n2. Once a location is added you can add details to the chapter by clicking on the\n **Edit** button next to the location:\n\n3. Click \"**Edit**\" to enter the title, description, image, and date for your\n chapter.\n\n4. If you want to delete a particular chapter, there is a **delete** button right\n below the Edit button.\n\n5. You can **reorder** the chapters by dragging and moving using the left hand\n dotted icons:\n\nSave the chapter\n\nTo save a specific chapter just click the \"**Leave Edit mode**\" button.\nThe Leave Edit mode button acts as a save button.\n\nCustomize camera settings\n\nYou can customize different camera settings:\n\n- **Show/hide the location marker** You may not want\n to show the pin on a specific location rather want to showcase a general area.\n Check/uncheck the \"Display location marker\" box to show or hide a pin.\n\n- **Show a radius around an area** You can choose to show an area around a\n specific location using the \"Display Radius Focus\" feature. When checked\n it will open up a radius slider that will allow you to control the boundary\n radius of the camera focus.\n\n | **Note:** Make sure to click \"Save camera position\" to save the above settings before exiting.\n\nThis shows how advanced camera options help create a customized experience.\n\n- **Customize the camera location** Fine tune the specific camera angle you\n want to show with easy camera controls:\n\n- **Tilt:** See the map from above or at ground level. Hold down the Control\n key (or Cmd on some computers) while clicking and dragging up or down with\n your mouse.\n\n- **Rotate:** Spin the map for a 360-degree view. Hold down the Control key\n (or Cmd on some computers) while clicking and dragging left or right with your\n mouse.\n\n- **Zoom:** Get a close-up or a wide-angle view. Use scroll wheel of your mouse\n or familiar zoom in/out gestures.\n\nExperiment with combining tilt, rotate, and zoom to find the perfect angle for\neach location. The controls may vary slightly depending on your computer's\nsetup.\n\nCheck how to control the 3D canvas to get your perfect camera angle.\n\nFinalize and download\n\nOnce the story and the chapters are built, download the configuration.\n\nClick \"**Download**\" to get your customized config in JSON format.\n\nThis configuration can be used to create your own 3D Storytelling by forking the\ncode from [GitHub](https://github.com/googlemaps-samples/js-3d-storytelling)."]]