Введение
В этом руководстве рассказывается, как настроить решение 3D Storytelling, чтобы создавать увлекательные истории с привязкой к геолокации.
Вы можете настроить решение для сторителлинга двумя удобными способами. Во-первых, вы можете использовать интуитивно понятный интерфейс, доступный в приложении для администратора, со специальной панелью конфигурации. На этой панели можно изменять основные свойства, такие как URL изображения, название, дату и т. д., как для всей истории, так и для отдельных глав.
Во-вторых, вы можете точно настроить параметры камеры и параметры фокусировки для каждой главы, используя графический интерфейс в приложении для администратора. После настройки пользователи могут скачать сгенерированный 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– параметр положения, который определяет пространственные координаты камеры в 3D-среде. Оно состоит из трех значений: 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-рассказ", вы можете создавать собственные истории. Вот несколько идей:
- Придумай рассказ о своем родном городе или месте, которое ты посетил.
- Напишите рассказ об историческом событии или человеке, который вас вдохновляет.
- Создай рассказ о вымышленном мире или о своем сне.
Любые! Дайте волю воображению и создайте что-то особенное.