Введение
Это руководство познакомит вас с различными способами настройки решения 3D Storytelling, что позволит вам создавать захватывающие истории с геолокацией.
У вас есть возможность гибко настраивать свое решение для повествования двумя удобными способами. Во-первых, вы можете использовать интуитивно понятный пользовательский интерфейс, доступный в приложении Admin, с выделенной панелью конфигурации. На этой панели пользователи могут изменять основные свойства, такие как imageUrl, заголовок, дату и многое другое, как для всей истории, так и для отдельных глав.
Во-вторых, вы можете точно настроить параметры камеры и фокуса для каждой главы, используя графический интерфейс в приложении Admin. После того, как пользователи удовлетворены своей конфигурацией, у них есть возможность загрузить сгенерированный файл 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 определяет пространственные координаты камеры в 3D-среде. Он состоит из трех значений: x, y и z. Каждая координата представляет собой точку на осях x, y и z, определяющую местоположение камеры.heading: Параметр heading относится к горизонтальному направлению, в котором направлена камера. В географическом смысле он представляет собой угол между полем зрения камеры и направлением на север. Heading 0 указывает, что камера направлена точно на север.pitch: Параметр pitch определяет вертикальный угол камеры. Он обозначает наклон или отклонение поля зрения камеры. Положительный наклон направлен вниз, а отрицательный — вверх.roll: Параметр roll определяет вращение вокруг оси камеры. Он представляет собой вращательное движение камеры. Roll 0 указывает на отсутствие вращения, а положительные или отрицательные значения обозначают вращение вправо или влево соответственно.
focusOptions: Параметры фокусировки на определенной точке.focusRadius: Радиус фокусировки.showFocus: логическое значение для отображения или скрытия фокуса.showLocationMarker: логическое значение для отображения или скрытия маркера местоположения.
Сохраните вашу конфигурацию
Наконец, нажмите «Сохранить положение камеры» , чтобы сохранить положение камеры, затем нажмите « Выйти из режима редактирования» , чтобы сохранить свою работу.
Это приложение предоставляет удобный интерфейс, позволяющий настраивать 3D-опыт. Это приложение администратора.
Окончательный config.json
Окончательный файл config.json содержит всю информацию, необходимую для создания вашего собственного опыта повествования. Он включает в себя сведения о титульном листе, главы и настройки камеры. Вы можете использовать этот файл для точной настройки своей истории и убедиться, что она выглядит и ощущается именно так, как вы хотите.
Чтобы начать, загрузите файл config.json из приложения Admin или создайте новый с нуля. Затем откройте файл в текстовом редакторе и начните редактировать значения. Вы можете изменить текст, изображения и даже настройки камеры, чтобы создать уникальный и захватывающий опыт для своей аудитории.
Файл обзора истории в формате 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, вы можете начать создавать свои собственные истории. Вот несколько идей, с которых можно начать:
- Напишите историю о своем родном городе или месте, которое вы посетили.
- Создайте историю об историческом событии или человеке, который вас вдохновил.
- Придумайте историю о вымышленном мире или о вашем сне.
Возможности безграничны! Так что дайте волю своему воображению и создайте что-то действительно особенное.