Управление воспроизведением через JavaScript

A-Frame представляет собой фреймворк для создания виртуальной реальности на базе HTML и JavaScript. Его ключевое преимущество — возможность взаимодействовать со сценой через DOM и API компонентов, что позволяет динамически изменять объекты, анимации и поведение элементов. Управление воспроизведением через JavaScript включает в себя работу с сценой, сущностями, анимациями, событиями и плагинами компонентов.

Получение доступа к сущностям

Каждый объект в A-Frame определяется тегом <a-entity> или специализированными тегами, такими как <a-box>, <a-sphere>, <a-camera>. Для манипуляций через JavaScript используется стандартное DOM API:

const box = document.querySelector('#myBox');

После получения ссылки на сущность доступны следующие операции:

  • Изменение позиции, масштаба и вращения:
box.setAttribute('position', { x: 2, y: 1, z: -3 });
box.setAttribute('rotation', { x: 0, y: 45, z: 0 });
box.setAttribute('scale', { x: 1.5, y: 1.5, z: 1.5 });
  • Изменение материалов и цветов:
box.setAttribute('material', 'color', '#FF0000');
box.setAttribute('material', { metalness: 0.5, roughness: 0.3 });
  • Добавление или удаление компонентов:
box.setAttribute('animation', {
  property: 'rotation',
  to: '0 360 0',
  loop: true,
  dur: 2000
});
box.removeAttribute('animation');

Управление анимациями и воспроизведением

A-Frame предоставляет компонент animation, который можно создавать динамически через JavaScript. Для контроля воспроизведения важны методы start, pause, stop, доступные через компонент:

const anim = box.components.animation;
anim.play();   // Запуск анимации
anim.pause();  // Приостановка
anim.stop();   // Остановка и возврат к исходной позиции

Если анимаций несколько, их можно различать по имени:

box.setAttribute('animation__rotate', {
  property: 'rotation',
  to: '0 360 0',
  loop: true,
  dur: 3000
});
box.components['animation__rotate'].play();

Реакция на события

События в A-Frame работают аналогично стандартным DOM-событиям. Часто используются для управления воспроизведением:

box.addEventListener('click', () => {
  const anim = box.components['animation__rotate'];
  anim.isPlaying ? anim.pause() : anim.play();
});

События можно генерировать и программно:

box.emit('customEvent', { message: 'Hello VR' });
box.addEventListener('customEvent', (evt) => {
  console.log(evt.detail.message);
});

Управление сценой

С помощью JavaScript можно управлять всей сценой <a-scene>, включая рендеринг и время:

  • Пауза и возобновление рендеринга:
const scene = document.querySelector('a-scene');
scene.pause();   // Приостанавливает рендеринг всех сущностей
scene.play();    // Возобновляет
  • Добавление и удаление сущностей динамически:
const newSphere = document.createElement('a-sphere');
newSphere.setAttribute('position', { x: 1, y: 2, z: -5 });
newSphere.setAttribute('radius', 0.5);
scene.appendChild(newSphere);

// Удаление
scene.removeChild(newSphere);
  • Доступ к камере и управлению пользовательским контроллером:
const camera = scene.querySelector('[camera]');
camera.setAttribute('position', { x: 0, y: 1.6, z: 0 });

Взаимодействие с мультимедиа

Для воспроизведения аудио и видео A-Frame использует компоненты sound и material с текстурами видео. Управление через JavaScript выглядит следующим образом:

  • Аудио:
const soundEntity = document.querySelector('#mysound');
soundEntity.components.sound.playSound();
soundEntity.components.sound.pauseSound();
soundEntity.components.sound.stopSound();
  • Видео на поверхности:
const videoEl = document.querySelector('#myVideo');
videoEl.play();
videoEl.pause();
videoEl.currentTime = 0;

Можно также привязать события к окончанию воспроизведения:

videoEl.addEventListener('ended', () => {
  console.log('Видео завершилось');
});

Создание интерактивных сценариев

Комбинируя управление анимациями, событиями и медиа, создаются динамические VR-сцены:

box.addEventListener('mouseenter', () => {
  box.setAttribute('scale', { x: 2, y: 2, z: 2 });
  box.components['animation__rotate'].play();
});

box.addEventListener('mouseleave', () => {
  box.setAttribute('scale', { x: 1, y: 1, z: 1 });
  box.components['animation__rotate'].pause();
});

Использование комбинаций компонентов, динамического создания сущностей и контроля их свойств позволяет строить полноценные интерактивные VR-приложения, где сцена реагирует на действия пользователя в реальном времени.

Асинхронное управление и таймеры

Для сложных сценариев можно использовать setTimeout и setInterval для последовательного воспроизведения:

setTimeout(() => {
  box.components['animation__rotate'].play();
}, 2000);

const intervalId = setInterval(() => {
  const color = `#${Math.floor(Math.random()*16777215).toString(16)}`;
  box.setAttribute('material', 'color', color);
}, 1000);

// Прекращение через 10 секунд
setTimeout(() => clearInterval(intervalId), 10000);

Такая синхронизация позволяет создавать сцену с таймерами, триггерами и автоматическим циклом действий без ручного вмешательства пользователя.

Подключение сторонних компонентов

A-Frame поддерживает расширение функционала через внешние компоненты, которые подключаются через JavaScript и могут управляться теми же методами play, pause, stop:

AFRAME.registerComponent('auto-rotate', {
  schema: { speed: { type: 'number', default: 1 } },
  tick: function (time, timeDelta) {
    this.el.object3D.rotation.y += this.data.speed * timeDelta / 1000;
  }
});

box.setAttribute('auto-rotate', { speed: 2 });

Компоненты можно включать и отключать динамически:

box.components['auto-rotate'].pause();
box.components['auto-rotate'].play();

Эти инструменты JavaScript делают управление воспроизведением в A-Frame гибким и детализированным, позволяя создавать интерактивные, анимационные и медиа-насыщенные VR-сцены, полностью управляемые программно.

Оглавление