Адаптация под AR/VR: Three.js и A-Frame для метавселенных

25.08.2025 Автор: Максим Габов написал в рубрике JavaScript. 0 Комментариев.

За последние годы технологии дополненной (AR) и виртуальной реальности (VR) перестали быть нишевыми инструментами. С развитием метавселенных, таких как Meta Horizon или Decentraland, спрос на браузерные 3D-решения вырос в разы. Как веб-разработчик, я убежден: чтобы оставаться актуальным, важно освоить инструменты для создания интерактивных 3D-сцен. В этой статье я поделюсь своим опытом работы с Two.js и A-Frame, двумя ключевыми фреймворками для погружения в метавселенные прямо из браузера.

Three.js или A-Frame

Three.js: гибкость и контроль

Three.js это низкоуровневый JavaScript-фреймворк для работы с WebGL. Он идеален, если вам нужна полная свобода в создании сложных 3D-сцен.
Пример кода: Базовая сцена с кубом

// Инициализация сцены, камеры и рендерера
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Создание куба
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;

// Анимация
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

A-Frame: простота и скорость

A-Frame, построенный поверх Three.js, использует HTML-подобный синтаксис. Это отличный выбор для быстрого старта и интеграции AR/VR.
Пример кода: Сцена с вращающимся кубом

<!DOCTYPE html>
<html>
  <head>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="0 1 -3" rotation="0 45 0" color="#4CC3D9" animation="property: rotation; to: 0 360 0; loop: true; dur: 2000"></a-box>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

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

Добавление взаимодействия

В Three.js обработка событий требует ручной настройки. Например, для клика по объекту:

// Добавляем Raycaster для определения пересечений
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

window.addEventListener('click', (event) => {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObjects(scene.children);
  if (intersects.length > 0) {
    intersects[0].object.material.color.set(Math.random() * 0xffffff);
  }
});

В A-Frame интерактивность встроена через компоненты:

<a-box position="0 1 -3" color="blue" cursor-listener></a-box>
<script>
  AFRAME.registerComponent('cursor-listener', {
    init: function () {
      this.el.addEventListener('click', () => {
        this.el.setAttribute('color', '#FF0000');
      });
    }
  });
</script>

Сравнение Three.js и A-Frame

Критерий	Three.js	A-Frame
Сложность	Высокая (требует знания WebGL/JS)	Низкая (HTML-синтаксис)
Поддержка AR/VR	Через WebXR API	Встроенные компоненты (ar.js)
Производительность	Оптимизация зависит от разработчика	Автоматическая оптимизация
Гибкость	Полный контроль над рендерингом	Ограниченная кастомизация
Сообщество	Большое, много ресурсов	Активное, но меньше библиотек

Рекомендации для разработчиков

Выбор инструмента:
- Используйте Three.js для сложных проектов (игры, симуляции).
- A-Frame подойдет для быстрого прототипирования и AR/VR-приложений.
Оптимизация:
- Сжимайте текстуры и используйте LOD (Level of Detail) в Three.js.
- В A-Frame активируйте stats для мониторинга производительности.
Тестирование:
- Проверяйте сцены на мобильных устройствах и в VR-шлемах (Oculus Quest, HTC Vive).

Three.js и A-Frame открывают дверь в метавселенные, но выбор зависит от ваших задач. Лично я начинаю с A-Frame для MVP, а для глубокой кастомизации перехожу на Three.js.

Поддержать автора блога

Поддержка автора осуществляется с помощью специальной формы ниже, предоставленной сервисом «ЮMoney». Все платёжные операции выполняются на защищённой странице сервиса, что обеспечивает их корректность и полную безопасность.