简介
本指南将为您详细介绍 3D 故事讲述解决方案可以 自定义,让您能够创作引人入胜的地理定位故事。
您可以通过以下两种方式,灵活地配置他们的故事讲述解决方案: 便捷方法首先,您可以使用 管理应用,具有专用的配置面板。在此面板中,用户可以 修改主要属性,如 imageUrl、title、date 等, 比如整个故事和各个章节。
其次,你可以微调每个选项的相机设置和对焦选项 章节。对配置感到满意后 用户可以选择下载生成的 JSON 文件。
或者,您也可以直接修改 JSON 文件。 您可以调整 JSON 结构,加载已配置的故事讲述解决方案, 并绕过管理控制台。这种双重方法同时提供 简单易用的界面和高级 JSON 处理功能。
开始使用:
<ph type="x-smartling-placeholder">启用
创作你自己的故事
故事的总体布局分为一个封面故事和多个章节。
封面和章节均可单独自定义。来看看“
”吧
详细了解如何使用 Admin 应用构建和自定义故事
以及配置文件
封面
首先,您需要创建一个封面页 故事。这会为您的故事添加概览、封面照片和说明。
使用“管理”应用
首先,为您的故事添加一个封面页。您可以通过“管理”应用执行此操作 使用下列屏幕:
使用 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
:章节的相机设置。(详细了解相机 angles)position
:位置参数用于确定 在 3D 环境中使用相机。它包含三个值:x、y 和 z。 每个坐标都代表 x 轴、y 轴和 z 轴上的一个点, 相机的位置信息。heading
:航向参数是指 也就是镜头对准的物体从地理角度来说,它表示 镜头视角与正北方向之间的角度。标题为 0 表示镜头正对着正北。pitch
:Pitch 参数用于确定 摄像头。它表示镜头视野的倾斜度或倾斜度。答 正的音高朝下,负音高的音调向上。roll
:roll 参数定义以镜头方向为中心的旋转角度 轴。它表示相机的扭转运动。掷骰子 0 点 表示不旋转,而正值或负值表示 可分别向右或向左旋转。
focusOptions
:用于聚焦特定时间点的选项。focusRadius
:对焦的半径。showFocus
:用于显示或隐藏焦点的布尔值。showLocationMarker
:用于显示或隐藏位置标记的布尔值。
保存配置
最后,点击保存镜头位置以保存镜头位置,然后 点击退出修改模式以保存您的工作
此应用提供一个人性化的界面,让您可以自定义 3D 体验这是 Admin 应用。
最终的 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 Storytelling 应用, 可以开始创作你自己的故事了。以下这些方法可帮助您顺利入门:
- 创作一个关于您的家乡或您去过的地点的故事。
- 创作关于历史事件或鼓舞人心的人的故事。
- 创作关于虚构世界或梦想的故事。
有无限可能!尽情发挥您的想象力, 发现真正特别的东西