3D Storytelling: руководство по настройке,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 Maps, чтобы найти местоположение, которое вы хотите показать.

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

изображение

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

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

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

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

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

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

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

изображение

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

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

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

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

  • Фокус по радиусу создает тень виньетки вокруг определенной области без указания конкретного местоположения. Это отлично подходит для демонстрации района или общей территории.

изображение

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

Используйте config.json

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

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

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

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

    • 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": [
    {
      "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. Мы изучили различные параметры, доступные в приложении администратора, и то, как их можно использовать для создания захватывающих и увлекательных историй о геолокации. Мы также обсудили процесс создания собственной истории с использованием файла config.json. Следующие шаги

Теперь, когда вы научились настраивать приложение 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 Maps, чтобы найти местоположение, которое вы хотите показать.

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

изображение

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

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

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

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

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

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

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

изображение

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

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

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

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

  • Фокус по радиусу создает тень виньетки вокруг определенной области без указания конкретного местоположения. Это отлично подходит для демонстрации района или общей территории.

изображение

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

Используйте config.json

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

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

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

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

    • 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": [
    {
      "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. Мы изучили различные параметры, доступные в приложении администратора, и то, как их можно использовать для создания захватывающих и увлекательных историй о геолокации. Мы также обсудили процесс создания собственной истории с использованием файла config.json. Следующие шаги

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

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

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