Введение
В этом руководстве вы узнаете о различных способах настройки решения для 3D-рассказывания историй, позволяющих создавать захватывающие геолокационные сюжеты.
Вы можете гибко настраивать решение для создания историй двумя удобными способами. Во-первых, вы можете использовать интуитивно понятный пользовательский интерфейс, доступный в приложении «Администратор», с отдельной панелью настроек. В этой панели пользователи могут изменять основные свойства, такие как 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«Положение» определяет пространственные координаты камеры в трехмерной среде. Он состоит из трех значений: 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 . В нём определяется ряд важных переменных, таких как:
- РАДИУС
- BASE_PITCH_RADIANS
- BASE_HEADING_RADIANS
- BASE_ROLL_RADIANS
- DEFAULT_HIGHLIGHT_RADIUS
Вы можете свободно изменять эти параметры, чтобы получить различные ракурсы камеры и впечатления от съемки.
Заключение
В этом документе мы представили руководство по настройке приложения 3D Storytelling. Мы рассмотрели различные параметры, доступные в приложении «Администрирование», и то, как их можно использовать для создания захватывающих и увлекательных историй с использованием геолокации. Мы также обсудили процесс создания пользовательской истории с помощью файла config.json. Следующие шаги
Теперь, когда вы научились настраивать приложение 3D Storytelling, вы можете начать создавать свои собственные истории. Вот несколько идей для начала:
- Придумайте рассказ о своем родном городе или месте, которое вы посетили.
- Придумайте историю об историческом событии или человеке, который вас вдохновил.
- Придумайте историю о вымышленном мире или о сне, который вам приснился.
Возможности безграничны! Дайте волю своей фантазии и создайте нечто поистине особенное.