Руководство пользователя Отмена

Разработка и публикация контента для приложений виртуальной реальности

Поиск

Последнее обновление 25 мая 2023 г.

В Animate поддерживаются типы документов VR 360 и VR Panorama для быстрого создания привлекательного контента.Кроме того, новый тип документа VR можно использовать для импорта 3D-моделей (файлы .glb) в проект Animate и создания анимаций в 3D-контенте.

Для предварительного просмотра контента, созданного в типах документа VR, можно использовать новую панель «Просмотр VR». Можно щелкать и перемещать экземпляры MovieClip на панели «Просмотр VR». Animate автоматически обнаруживает объекты, когда вы их щелкаете и перемещаете. Режим «VR-представление» позволяет разместить объекты в 3D-пространстве. Изменения расположения объектов (в видеоролике) на панели «VR-представление» автоматически отражаются в двухмерной рабочей области. На панели «Временная шкала» можно пометить слои как текстовые, чтобы они оборачивались вокруг цилиндра или сферы для соответствующих типов документов.

Animate также позволяет управлять анимациями виртуальной реальности во время выполнения с помощью большого выбора API-интерфейсов. Например, когда пользователь нажимает кнопку, в среду виртуальной реальности можно добавить несколько объектов.

«Виртуальная реальность (360)» и «Виртуальная реальность (панорама)» в Animate выпускаются в октябре 2018 года в рамках бета-тестирования.

Типы документов VR

Имеется два типа документов для виртуальной реальности (VR).

VR Panorama

Используйте этот тип документа для создания панорамного контента для приложений виртуальной реальности.
В этом типе документа содержимое, которое отрисовывается прямо на слоях текстуры, оборачивается вокруг цилиндра.
На слое текстуры можно использовать панорамное изображение или нарисовать фон.
Animate преобразует создаваемые 2D-анимации в сферический панорамный контент с интерактивными возможностями.

Рабочая область

Используйте этот тип документа для создания сферического контента для приложений виртуальной реальности.
В этом типе документа содержимое, которое отрисовывается прямо на слоях текстуры, оборачивается вокруг сферы.
Можно использовать эквидистантное изображение или нарисовать контент.
Animate преобразует создаваемые 2D-анимации в сферический панорамный контент с интерактивными возможностями.

Разработка и публикация VR-контента

Выполните следующие действия, чтобы создать контент для приложений виртуальной реальности в Animate.

Импортируйте сферическое или панорамное изображение в рабочую область для фона.
Если изображение большого размера, можно изменить размер представления рабочей области.
- Чтобы задать размер, выберите Модификация > Документ
- Щелкните По размеру содержимого
Щелкните значок Центрировать рабочую область в верхнем правом углу окна, чтобы расположить изображение в центре экрана.
Чтобы создать слой текстуры, щелкните значок Создать обтекание текстур для всех слоев на панели «Временная шкала», как показано на снимке экрана.

Создание обтекания текстур для слоев

Слой текстуры оборачивается вокруг цилиндра или сферы в зависимости от выбранного типа документа.
Добавьте объекты на рабочую область, добавьте в объекты классическую анимацию или анимацию движения в зависимости от ресурсов, и создайте анимацию.

Рабочая область VR 360

На снимке экрана выше показано представление рабочей области Animate с эквидистантным изображением в документе типа VR 360: птица с траекторией движения и классическая анимация на временной шкале.
Просмотрите контент, выбрав Окно > Просмотр VR.

Использование VR-представления для просмотра VR-контента

Нажмите кнопку VR-представление на панели «VR-представление».

Панель VR-представления

В режиме предварительного просмотра «Просмотр VR» нажмите кнопку Сброс, чтобы вернуть первоначальное состояние контента. Просмотр VR не отражает автоматически изменений на рабочей области в среде создания. Для просмотра изменений, примененных к ресурсам в среде рабочей области, нажмите кнопку Обновить.

Кнопки «Обновить» и «Сбросить» в окне «VR-представление»

В режиме «Просмотр» можно перемещать экземпляры MovieClip. Animate автоматически обнаруживает объекты при наведении мыши. Форма курсора меняется на крестовидный значок при наведении мыши на объекты, как показано на снимке экрана. Можно перемещать объекты по цилиндру или сфере в зависимости от типа документа.

Для перемещения в окне «Просмотр VR» щелкните и перетащите экран предварительного просмотра.

Крестообразный значок для перемещения объектов
Выберите Файл > Опубликовать или нажмите клавиши Ctrl + Enter, чтобы опубликовать контент. При публикации изображение оборачивается вокруг цилиндрической или сферической сетки в Animate. Можно добавить больше слоев и анимированного контента на эти слои.

В приведенном ниже GIF-файле показан образец опубликованного вывода VR 360.

Пример вывода VR 360

Пример вывода VR (panorama)

При публикации контента для виртуальной реальности можно использовать размещенные библиотеки JavaScript в качестве среды выполнения. По умолчанию Animate использует для опубликованного контента размещенные библиотеки. Можно снять этот флажок в окне «Параметры публикации», если требуется упаковать среду выполнения вместе с опубликованным выводом.

Параметры публикации для библиотек

Новый взгляд на анимацию через виртуальную реальность

Сейчас виртуальная реальность является доминирующим трендом на рынке. Хотите привнести в свой контент возможности виртуальной реальности? Посмотрите учебный видеоролик в конце этого примера и выполните следующие действия.

На вкладке Главная нажмите Дополнительно.
Выберите VR Panorama и Создать.

Создание панорамного контента с помощью Animate

Посмотрите видео и узнайте, как добавить больше эффектов в панорамном представлении, чтобы расширить виртуальные возможности.

Видеоруководство по экспорту WebGL-glTF (стандартный и расширенный)

Видео с демонстрацией использования экспорта WebGL-glTF (стандартный и расширенный)

Использование 3D-контента

Кроме того, тип документа VR можно использовать для импорта 3D-моделей (файлы .glb) в проект Animate и создания 3D-контента.

Создайте документ типа VR (360) или VR (panorama).
Выберите «Файл» > «Импортировать» и найдите GLB-файл для импорта в рабочую область или библиотеку.

импорт 3D-контента в рабочую область
Добавляйте анимацию и интерактивные функции, как объекты фрагмента ролика, и публикуйте вывод.

Также можно выполнить предварительный просмотр 3D-модели в окне «Просмотр VR».

Использование виртуальной реальности во время выполнения

Animate также позволяет управлять анимациями виртуальной реальности во время выполнения с помощью API-интерфейсов. Например, когда пользователь нажимает кнопку, в сферическую среду виртуальной реальности можно добавить несколько объектов.

Список API среды выполнения виртуальной реальности:

Пакет: anWebgl

Свойства

Имя	Тип/класс	Доступ	Описание	Пример
Рабочая область	Рабочая область	RW	Получить/задать свойства рабочей области	anWebgl.stage
virtualCamera	VirtualCamera	RW	Доступ к камере по умолчанию	anWebgl.virtualCamera
Корень	MovieClip	RO	Самый верхний отображаемый объект (временная шкала текущей сцены).	anWebgl.root

Методы

Имя	Прототип	Описание	Пример
addGLBFile	addGLBFile(filePath: string, successCallback : function, errorCallback : function):void	Загрузка 3D-модели из заданного файла GLB	anWebgl.addGLBFile("model.glb" , successCallbackFunction, errorCallbackFunction).
playAll	playAll() : void	Воспроизведение анимации для всех фрагментов ролика, включая корневой	anWebgl.playAll();
stopAll	stopAll() : void	Остановка анимации для всех фрагментов ролика, включая корневой	anWebgl.stopAll();

Класс: MovieClip

Наследует: DisplayObjectContainer

Свойства

Методы

Имя	Прототип	Описание	Пример
Play	play(): void	Воспроизведение анимации для фрагмента ролика.	anWebgl.root.getChildByName("name").play(); (или) this.play();
Stop	stop(): void	Останавливает анимацию для фрагмента ролика	anWebgl.root.getChildByName("name").stop();
playAll	playAll() : void	Воспроизведение анимации для всех фрагментов ролика, включая корневой.	anWebgl.root.getChildAt(0).playAll();
stopAll	stopAll():void	Остановка анимации для всех фрагментов ролика, включая корневой.	anWebgl.root.getChildAt(0)).stopAll();

Класс: DisplayObject

Наследует: IEventDispatcher

Имя	Прототип	Описание	Пример
hitTestPoint	hitTestPoint(x, y, Boolean).	Возвращает displayObject/displayObjectContainer/movieClip на основе типа объекта нажатия. X и Y — точки координат на экране.	anWebgl.root.hitTestPoint(300, 200, true, false);

Имя	Тип/класс	Доступ	Описание	Пример
X	Number	RW	Перемещение по оси X	var name =anWebgl.root.getChildByName("name"); name.x+=10;
Y	Number	RW	Перемещение по оси Y	var name = anWebgl.root.getChildByName("name"); name.y+=10;
Z	Number	RW	Перемещение по оси Z	var name = anWebgl.root.getChildByName("name"); name.z+=10;
scaleX	Number	RW	Масштабирование по оси X	var root = anWebgl.root; var child = root.getChildAt(0); child.scaleX=2;
scaleY	Number	RW	Масштабирование по оси Y	var root = anWebgl.root; var child = root.getChildAt(0); child.scaleY=10;
scaleZ	Number	RW	Масштабирование по оси Z	var root = anWebgl.root; var child = root.getChildAt(0); child.scaleZ=10;
rotationX	Number	RW	Поворот по оси X	anWebgl.root.getChildByName("name").rotationX+=30; (или) anWebgl.root.movieClip_name.rotationX+=30;
rotationY	Number	RW	Поворот по оси Y	anWebgl.root.getChildByName("name").rotationY+=30;
rotationZ	Number	RW	Поворот по оси Z	anWebgl.root.getChildByName("name").rotationZ+=30;
Parent	DisplayObjectContainer	RO	Родительский контейнер	var root = anWebgl.root; var child = root.getChildAt(0); console.log(child.parent)
Visible	Boolean	RW	Видимость объекта	var root = anWebgl.root; var child = root.getChildAt(0); console.log(child.visible);

Класс: DisplayObjectContainer

Наследует: DisplayObject

Имя	Прототип	Описание	Пример
numChildren	numChildren:num	Возвращает число дочерних объектов для объекта.	anWebgl.root.movieClipInstanceName.numChildren;
removeChild	removeChild(obj:DisplayObject):void	Удаляет объект аргумента, если он есть.	anWebgl.root.movieClipInstanceName.removeChild(childObj);
Contains	contains(obj:DisplayObject):boolean	Возвращает значение True, если объект аргумента является дочерним, в противном случае возвращает False.	anWebgl.root.movieClipInstanceName.contains(childObj);
getChildAt	getChildAt(index:Number): DisplayObject	Возвращает дочерний объект в индексе аргументов.	anWebgl.root.movieClipInstanceName.getChildAt(2);
getChildByName	getChildByName(name:String): DisplayObject	Возвращает дочерний объект с именем аргумента, если он существует.	anWebgl.root.movieClipInstanceName.getChildByName(childName);

Класс: Stage

Свойства

Имя	Доступ	Описание	Пример
stageWidth	RO	Ширина рабочей области	anWebgl.stage.stageWidth
stageHeight	RO	Высота рабочей области	anWebgl.stage.stageHeight
Color	RW	Цвет фона рабочей области	anWebgl.stage.color

Класс: VirtualCamera

Методы

Имя	Прототип	Описание	Пример
getCamera	getCamera()	Получение объекта камеры. Для получения или задания свойств камеры во время выполнения.	let cam = anWebgl.virtualCamera.getCamera(); let pos = cam.getPosition(); console.log("camera position x: " +pos.x + " y: "+ pos.y+" z: "+pos.z);
getPosition	getPosition()	Возвращает объект со свойствами x, y и z, которые определяют текущее положение камеры.	let cam = anWebgl.virtualCamera.getCamera(); let pos = cam.getPosition(); console.log("camera position x: " +pos.x + " y: "+ pos.y+" z: "+pos.z);
setPosition	setPosition()	Камера перемещается в абсолютное положение, заданное входными параметрами. Значение по умолчанию = 0.	let cameraPos = {x: 10, y:10, z:10}; anWebgl.virtualCamera.getCamera().setPosition(cameraPos);
moveBy	moveBy()	Камера перемещается относительно текущего положения.	let moveByPos = {x: 10, y:10, z:10}; anWebgl.virtualCamera.getCamera().moveBy(moveByPos);
resetPosition	resetPosition()	Положение камеры сбрасывается до исходной позиции, т. е. (0,0,0).	anWebgl.virtualCamera.getCamera().resetPosition();
SetRotation	SetRotation()	Камера поворачивается на абсолютный угол, заданный в качестве входного параметра.	let __rotation__ = {x: 10, y:10, z:10}; anWebgl.virtualCamera.getCamera().setRotation(__rotation__);
resetRotation	resetRotation()	Угол камеры сбрасывается до нуля.	anWebgl.virtualCamera.getCamera().resetRotation();

Получайте помощь быстрее и проще

Новый пользователь?

Разработка и публикация контента для приложений виртуальной реальности

Типы документов VR

VR Panorama

Рабочая область

Разработка и публикация VR-контента

Новый взгляд на анимацию через виртуальную реальность

Создание панорамного контента с помощью Animate

Видеоруководство по экспорту WebGL-glTF (стандартный и расширенный)

Использование 3D-контента

Использование виртуальной реальности во время выполнения

Похожие темы

Получайте помощь быстрее и проще

Вопросы сообществу

Свяжитесь с нами