简介
本指南将向您介绍自定义 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 Maps Platform 自动补全搜索栏查找您要显示的位置。
添加地点后,您可以点击地点旁边的修改按钮,为章节添加详细信息:

添加有关该地点的详细信息:
对整体配置感到满意后,下载 JSON 文件,即可在演示版应用中使用。
使用 config.json 进行配置
您可以直接在下载的 config.json 文件中修改以下变量,以自定义每个章节:
title:章节标题。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:俯仰角参数决定了镜头的垂直角度。它表示相机视图的倾斜度。正俯仰角表示向下看,负俯仰角表示向上看。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 故事讲述应用,可以开始创建自己的故事了。以下这些方法可帮助您顺利入门:
- 创作一个关于你的家乡或你曾去过的地方的故事。
- 创作一个故事,讲述一个历史事件或一个曾给您带来启发的人。
- 创作一个关于虚构世界或你做过的梦的故事。
这里有无限可能!所以,尽情发挥想象力,创作出真正特别的作品吧。