Настройки 3D Storytelling

Введение

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

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

Во-вторых, вы можете точно настроить параметры камеры и параметры фокусировки для каждой главы, используя графический интерфейс в приложении администратора. После того, как пользователи будут удовлетворены своей конфигурацией, у них появится возможность загрузить сгенерированный файл 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: параметр position определяет пространственные координаты камеры в трехмерной среде. Оно состоит из трех значений: x, y и z. Каждая координата представляет собой точку на осях x, y и z, определяющую местоположение камеры.

    • heading – параметр, определяющий горизонтальное направление камеры. В географических терминах это угол между направлением камеры и направлением на север. Нулевое значение соответствует направлению на север.

    • 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. Оно определяет ряд важных переменных, таких как:

  • RADIUS
  • BASE_PITCH_RADIANS
  • BASE_HEADING_RADIANS
  • BASE_ROLL_RADIANS
  • DEFAULT_HIGHLIGHT_RADIUS

Вы можете менять эти переменные, чтобы получить разные ракурсы и эффекты.

Заключение

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

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

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

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