3D 讲故事:使用编辑器来构思故事
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
准备好创作引人入胜的 3D 故事,带领观看者畅游现实世界中的地点了吗?本指南将向您展示如何使用内置编辑器制作新故事。
使用我们直观的界面调整标题、说明、图片和拍摄角度。非常适合初学者!
打开故事编辑器
3D 故事叙述解决方案附带内置编辑器,可让您通过界面构建故事
编辑器位于页面左侧。点击此小图标即可打开:

您可以访问托管版 3D 故事讲述管理应用来使用编辑器,也可以从 GitHub 下载并安装自己的故事讲述实例
创建封面页
使用“故事详情”部分设置标题、图片、说明和其他详细信息。这样,观看者可以了解您的故事。

添加章节
每个章节都像您旅途中的一站。添加方法如下:
使用内置的自动补全搜索栏搜索地点。
添加位置后,您可以点击位置旁边的修改按钮,为相应章节添加详细信息:

点击“修改”以输入章节的标题、说明、图片和日期。

如果您想删除特定章节,请点击“修改”按钮正下方的删除按钮。
您可以使用左侧的点状图标拖动并移动章节,从而重新排序:

保存章节
如需保存特定章节,只需点击“退出编辑模式”按钮即可。
“退出修改模式”按钮相当于“保存”按钮。

自定义相机设置
您可以自定义各种相机设置:

此视频展示了高级相机选项如何帮助打造自定义体验。
自定义摄像头位置:通过简单的摄像头控制功能,微调您想要显示的具体摄像头角度:
倾斜:从上方或地面层查看地图。按住 Control 键(在某些电脑上为 Cmd 键),同时使用鼠标点击并向上或向下拖动。
旋转:旋转地图以查看 360 度全景。按住 Control 键(或某些电脑上的 Cmd 键),同时使用鼠标点击并向左或向右拖动。
缩放:获取特写或广角视图。使用鼠标滚轮或熟悉的放大/缩小手势。
尝试组合使用倾斜、旋转和缩放功能,为每个位置找到理想的角度。具体控件可能会因计算机的设置而略有不同。

了解如何控制 3D 画布,以获得理想的拍摄角度。
完成并下载
故事和章节构建完成后,下载配置。
点击“下载”以获取 JSON 格式的自定义配置。

您可以从 GitHub 分叉代码,使用此配置创建自己的 3D 故事讲述。
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2025-08-27。
[null,null,["最后更新时间 (UTC):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)."]]