3D Storytelling: руководство по настройке

Введение

В этом руководстве вы узнаете о различных способах настройки решения 3D Storytelling, что позволит вам создавать захватывающие истории с привязкой к геолокации.

Вы можете гибко настраивать решение для повествования двумя удобными способами. Во-первых, вы можете использовать интуитивно понятный пользовательский интерфейс приложения администратора со специальной панелью настроек. На этой панели пользователи могут изменять основные параметры, такие как imageUrl, название, дату и другие, как для всей истории, так и для отдельных глав.

Во-вторых, вы можете точно настроить параметры камеры и фокусировки для каждой главы, используя графический интерфейс в приложении администратора. После того, как настройки будут готовы, пользователи смогут скачать сгенерированный JSON-файл.

Кроме того, вы можете напрямую редактировать JSON-файл. Вы можете настроить структуру JSON, загрузить настроенное решение для сторителлинга и обойти панель управления администратора. Этот двойной подход обеспечивает как удобный интерфейс, так и расширенные возможности работы с JSON.

Начиная:

Давать возможность

Создайте свою собственную историю

Общая структура истории разделена на обложку и главы. Как обложку, так и главу можно настроить индивидуально. Подробнее
подробности о том, как можно создавать и настраивать истории с помощью приложения администратора, а также файла конфигурации.

Титульный лист

Первое, что вам нужно сделать, — это создать титульную страницу для вашей истории. Она добавит к ней обзор, фотографию на обложке и описание.

Использовать приложение администратора

Начните с добавления титульной страницы для своей истории. Это можно сделать в приложении администратора, используя следующий экран:

изображение

Использовать config.json

Кроме того, если у вас есть файл конфигурации, вы можете напрямую добавить в него следующие разделы:

  • 1. imageUrl : URL-адрес основного медиафайла (изображения, GIF-файла или видео) для всей истории.

Это может быть любой общедоступный URL-адрес, указывающий на изображение, GIF-файл или видеофайл, который вы хотите использовать в качестве основного медиафайла для всей истории.

  • 2. title : Название всей истории.
  • 3. date : Дата или временные рамки, связанные с историей.
  • 4. description : краткое описание истории.
  • 5. createdBy : Создатель или автор истории.
  • 6. imageCredit : Указание автора основного изображения.
  • 7. cameraOptions : Начальные настройки камеры для всей истории.

Главы

История разделена на главы, каждая со своим набором переменных. Вы можете создать столько глав, сколько захотите. Сначала выберите адрес, а затем добавьте в главу следующую информацию.

Использовать приложение администратора

Поиск местоположения : используйте встроенную панель поиска автозаполнения платформы Google Карт, чтобы найти местоположение, которое вы хотите отобразить.

После добавления местоположения вы можете добавить подробности в главу, нажав кнопку «Изменить» рядом с местоположением:

изображение

Добавьте информацию о местоположении:

Если вас устраивает общая конфигурация, загрузите json-файл и используйте его в демонстрационном приложении.

Настроить с помощью config.json

Для настройки каждой главы вы можете редактировать следующие переменные непосредственно в загруженном файле config.json:

  • title : Название главы.
  • id : Уникальный идентификатор главы.
  • imageUrl : URL-адрес изображения главы.
  • imageCredit : Авторство изображения главы.
  • content : Текстовое содержание главы.
  • dateTime : Дата или временные рамки, относящиеся к главе.
  • coords : Координаты местоположения, связанного с главой.
    • lat : Широта.
    • lng : Долгота.
  • address : Адрес, относящийся к главе.

Настройки камеры

Приложение предоставляет множество различных элементов управления камерой. В этом разделе вы узнаете о различных настройках камеры и о том, как их настроить.

изображение

(Панорамируйте, масштабируйте, наклоняйте камеру, чтобы получить идеальный угол обзора)

Используйте приложение администратора

Камера: отрегулируйте скорость движения камеры и тип орбиты, чтобы создать желаемый опыт просмотра.

  • Маркер местоположения позволяет вам отображать или скрывать метку в определенном месте.

  • Радиусный фокус создаёт эффект виньетирования вокруг определённой области, не привязывая её к конкретному месту. Это отлично подходит для демонстрации района или местности в целом.

изображение

Здесь показано, как изменить фокус камеры, чтобы показать область, а не определенную точку.

Использовать config.json

Вы также можете настроить все параметры камеры напрямую, используя файл конфигурации json:

  • cameraOptions : Настройки камеры для главы. (подробнее о ракурсах )

    • position : параметр «положение» определяет пространственные координаты камеры в трёхмерной среде. Он состоит из трёх значений: x, y и z. Каждая координата представляет собой точку на осях x, y и z, определяющую местоположение камеры.

    • heading : Параметр «Направление» определяет горизонтальное направление, в котором направлена ​​камера. В географическом смысле он представляет собой угол между полем зрения камеры и направлением на север. Значение «Направление 0» указывает, что камера направлена ​​строго на север.

    • pitch : Параметр Pitch определяет вертикальный угол камеры. Он определяет наклон или отклонение поля зрения камеры. Положительный наклон направлен вниз, отрицательный — вверх.

    • Параметр « roll » определяет вращение вокруг оси камеры. Он представляет собой вращательное движение камеры. Значение «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 . Он определяет ряд важных переменных, таких как:

  • РАДИУС
  • BASE_PITCH_RADIANS
  • BASE_HEADING_RADIANS
  • BASE_ROLL_RADIANS
  • DEFAULT_HIGHLIGHT_RADIUS

Не стесняйтесь настраивать эти переменные, чтобы получить различные углы обзора и впечатления.

Заключение

В этом документе мы представили руководство по настройке приложения 3D Storytelling. Мы рассмотрели различные возможности, доступные в приложении Admin, и способы их использования для создания захватывающих и увлекательных историй с привязкой к геолокации. Мы также обсудили процесс создания собственной истории с помощью файла config.json. Дальнейшие действия

Теперь, когда вы научились настраивать приложение 3D Storytelling, вы можете приступить к созданию собственных историй. Вот несколько идей для начала:

  • Напишите рассказ о своем родном городе или месте, которое вы посетили.
  • Создайте историю об историческом событии или человеке, который вас вдохновил.
  • Придумайте историю о вымышленном мире или о вашем сне.

Возможности безграничны! Дайте волю своему воображению и создайте что-то поистине особенное.