A-Frame це вебфреймворк з відкритим вихідним кодом для створення віртуальної реальності (ВР). В першу чергу він підтримується Mozilla та спільнотою WebVR. Це фреймворк на основі системи компонентів сутності (entity component system) для Three.js де розробники можуть створювати 3D і WebVR сцени, використовуючи HTML. HTML забезпечує звичні засоби роботи для веброзробників і дизайнерів, включно із популярними патернами розробки ігор, які використовуються наприклад в Unity.
Історія A-Frame був розроблений в команді Mozilla VR у другій половині 2015 року. Команда Mozilla VR стала піонером платформи WebVR та специфікацій для неї, але був потрібен простіший спосіб створення контенту. У роботі над розробкою A-Frame брали участь Дієго Маркос, Джош Карпентер, Кейсі Йі, Кріс Ван Вієрерш та Кевін Ного. A-Frame був створений для того, щоб дозволити веброзробникам та дизайнерам створювати 3D та VR-контент з HTML без необхідності знати WebGL. Перший публічний реліз A-Frame відбувся 16 грудня 2015 року. В даний час у розвитку проекту беруть участь понад 75 учасників.
Переваги 3D і VR контент створюється з використанням HTML. Налаштування сцени в одному рядку HTML-коду (<a-scene>) для обробки рендерингу, циклу візуалізації, світла, керування, налаштування WebVR. Сумісність з більшістю веббібліотек та фреймворків, що нині існують (React, AngularJS, D3.js, Vue.js). Архітектура системи компонентів сутності полегшує роботу з успадкуванням складних 3D-об'єктів з компонентами, які можна використовувати багато разів. Розширювана екосистема плагінів компонентів об'єктів. Візуальний інспектор, який може бути викликаний в браузері з будь-якої сцени A-Frame.
Використання Звичайна сцена A-Frame може міститися у файлі HTML, що включає один файл JavaScript.
<html> <head> <title>Hello, World!</title> <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script> </head> <body> <a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene> </body> </html>Оскільки A-Frame базується на системі компонентів сутності, під капотом кожен об'єкт сцени — це сутність. Сутності є загальними об'єктами-заповнювачами. Компоненти — складні та багаторазові модулі, які можна підключити до сутностей для додавання зовнішнього вигляду, поведінки та функціональності. Компоненти написані на JavaScript, і їх можна зробити для будь-чого, а потім виставити декларативний API через HTML. Ось приклад включення пари компонентів від спільноти для систем часток та фізики за допомогою зовнішніх скриптів, які потім використовується в HTML.<script src="https://unpkg.com/aframe-particle-system-component/"></script> <script src="https://unpkg.com/aframe-physics-system/"></script>
<a-entity geometry="primitive: box" material="color: red; metalness: 0.5" dynamic-body="mass: 5" light="type: point; intensity: 1.1" particle-system ></a-entity>
Приклади використання A-Frame використовується для різних потреб і цілей, наприклад: Fear of the Sky (360 Syria), 2016, Amnesty International UK. Journey to Mars, 2016, The Washington Post. iStaging LiveTour, 2016, iStaging. A-Painter, 2016, Mozilla. Shopify VR, 2016, Shopify. Stand at the Edge of Geologic Time, 2016, NPR. Guri VR, 2016, The New York Times.
Спільнота Всі IDE, що працюють онлайн, підтримують A-Frame, оскільки він базується на HTML. Для API доступна документація. Підтримка розробників, які беруть участь у бібліотеці, надається через GitHub, тоді як підтримка розробників, які створюють додатки та вебсторінки, надається через StackOverflow. Підтримка в реальному часі здійснюється через Slack. Більшість розробників також є у Твіттері.
Див. також Three.js HTML Entity component system WebVR
Примітки