3D 讲故事：自定义指南

简介

本指南将为您详细介绍 3D 故事讲述解决方案可以 自定义，让您能够创作引人入胜的地理定位故事。

您可以通过以下两种方式，灵活地配置他们的故事讲述解决方案： 便捷方法首先，您可以使用 管理应用，具有专用的配置面板。在此面板中，用户可以 修改主要属性，如 imageUrl、title、date 等， 比如整个故事和各个章节。

其次，你可以微调每个选项的相机设置和对焦选项 章节。对配置感到满意后 用户可以选择下载生成的 JSON 文件。

或者，您也可以直接修改 JSON 文件。 您可以调整 JSON 结构、加载已配置的故事讲述解决方案， 并绕过管理控制台。这种双重方法同时提供 简单易用的界面和高级 JSON 处理功能。

开始使用：

<ph type="x-smartling-placeholder">

</ph> 使用托管的 3D Storytelling Admin 应用

或

获取 API 密钥。 然后从 GitHub 下载代码。

启用

• 仿真 3D 图块 API
• Places API

创作你自己的故事

故事的总体布局分为一个封面故事和多个章节。 封面和章节均可单独自定义。来看看“
”吧 详细了解如何使用 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 文件进一步自定义相机。 它定义了许多重要变量，例如：

• 半径
• BASE_PITCH_RADIANS
• BASE_HEADING_RADIANS
• BASE_ROLL_RADIANS
• DEFAULT_HIGHLIGHT_RADIUS

您可以随意调整这些变量，以获取各种镜头角度和体验。

总结

在本文档中，我们介绍了如何自定义 3D 故事讲述， 应用。我们介绍了管理员应用中提供的各种选项， 如何利用它们来创作引人入胜的沉浸式地理定位故事。周三 还讨论了使用 config.json 创建自定义故事的过程 文件。后续步骤

现在，您已经学习了如何自定义 3D Storytelling 应用， 可以开始创作你自己的故事了。以下这些方法可帮助您顺利入门：

• 创作一个关于您的家乡或您去过的地点的故事。
• 创作关于历史事件或鼓舞人心的人的故事。
• 创作关于虚构世界或梦想的故事。

有无限可能！尽情发挥您的想象力， 发现真正特别的东西