3D 讲故事:自定义指南

简介

本指南将向您介绍 3D 故事片段解决方案的各种自定义方式,让您能够制作引人入胜的地理位置故事。

您可以通过两种便捷的方法灵活配置其讲故事解决方案。Firs,您可以使用 Admin 应用中提供的直观界面,该界面有一个专用的配置面板。在此面板中,用户可以修改整个故事和各个章节的主要属性,例如 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 自动补全搜索栏查找要显示的地点。

添加位置后,您可以通过点击位置旁边的 Edit 按钮向章节添加详细信息:

图片

添加相应位置的详细信息:

满意整体配置后,下载 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:航向参数是指摄像头指向的水平方向。在地理术语中,它表示镜头视角与北方方向之间的角度。航向为 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 故事讲述应用,可以开始制作自己的故事了。以下这些方法可帮助您顺利入门:

  • 创作一个关于您的家乡或您去过的地点的故事。
  • 创作一个关于历史事件或给您带来启发的人物的故事。
  • 创作一个关于虚构世界或您曾做过的梦的故事。

无限可能尽在您的手中!所以放任自己的想象力,创作出真正独一无二的作品