aframe учебник
Начало работы с aframe
Поиск…
замечания
В этом разделе представлен обзор того, что такое aframe, и почему разработчик может захотеть его использовать.
Он также должен упомянуть о любых крупных предметах в рамках афера и ссылки на соответствующие темы. Поскольку Documentation for aframe является новым, вам может потребоваться создать начальные версии этих связанных тем.
Версии
A-Frame 0.x
| Версия | Дата выхода |
|---|---|
| 0.6 | 2017-05-25 |
| 0,5 | 2017-02-10 |
| 0,4 | 2016-12-17 |
| 0,3 | 2016-08-18 |
Устаревшие версии
| Версия | Дата выхода |
|---|---|
| 0.2 | 2016-03-26 |
| 0,1 | 2015-12-17 |
Начиная
A-Frame может быть разработан из простого HTML-файла без необходимости устанавливать что-либо! Отличный способ опробовать A-Frame, чтобы перемотать пример стартера в Glitch, редактор онлайн-кода, который мгновенно размещает и развертывает бесплатно. Или создайте файл .html и включите A-Frame в head :
<html>
<head>
<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>
Включите JS Build
Чтобы включить A-Frame в HTML-файл, мы удаляем тег script указывающий на сбор CDN:
<head>
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
</head>
Установить с npm
Мы также можем установить A-Frame через npm:
$ npm install aframe
Затем мы можем связать A-Frame в нашем приложении. Например, с Browserify или Webpack:
require('aframe');
Если вы используете npm, вы можете использовать угол, интерфейс командной строки для A-Frame. angle может инициализировать шаблон сцены с помощью одной команды:
npm install -g angle && angle initscene
Характеристики
VR Made Simple
Просто запустите тег script и a-scene . A-Frame будет обрабатывать 3D-шаблон, настройку VR и элементы управления по умолчанию. Нечего устанавливать, никаких шагов сборки.
Декларативный HTML
HTML легко читается, понимает и копирует и вставляет. A-Frame, основанный на вершине HTML, доступен всем: веб-разработчикам, энтузиастам VR, художникам, дизайнерам, педагогам, создателям, детям.
Кросс-платформенный VR
Создавайте приложения VR для Vive, Rift, Daydream, GearVR и Cardboard с поддержкой всех соответствующих контроллеров. У вас нет гарнитуры или контроллеров? Нет проблем! A-Frame по-прежнему работает на стандартных настольных компьютерах и смартфонах.
Архитектура объектно-компонентной архитектуры
A-Frame - это мощная инфраструктура three.js, предоставляющая декларативную, составную, повторно используемую структуру entity-component structure.js. HTML - это только верхушка айсберга; разработчики имеют неограниченный доступ к JavaScript, DOM API, three.js, WebVR и WebGL.
Спектакль
A-Frame оптимизирован с нуля для WebVR. Хотя A-Frame использует DOM, его элементы не касаются механизма компоновки браузера. Обновления 3D-объектов выполняются в памяти с небольшими накладными расходами при одном вызове requestAnimationFrame. Для справки см. A-Painter, клон Tilt Brush, встроенный в A-Frame, который работает как native (90+ FPS).
Инструмент Агностик
Поскольку веб-сайт был основан на понятии HTML, A-Frame совместим с большинством библиотек, фреймворков и инструментов, включая React, Preact, Vue.js, Angular, d3.js, Ember.js, jQuery.
Визуальный инспектор
A-Frame обеспечивает удобный встроенный визуальный 3D-инспектор. Откройте любую сцену A-Frame, нажмите ctrl + alt + i и летите за капотом!
реестр
Возьмите мощные компоненты, которые разработчики опубликовали, и подключите их прямо из HTML. Как и в Unity Asset Store, A-Frame Registry собирает и курает эти компоненты для легкого обнаружения.
Компоненты
Попадите в землю с помощью основных компонентов A-Frame, таких как геометрия, материалы, огни, анимации, модели, raycasters, тени, позиционный звук, текст и элементы управления Vive / Touch / Daydream / GearVR / Cardboard. Получите еще больше с компонентами сообщества, такими как системы частиц, физика, многопользовательские, океаны, горы, распознавание речи, захват движения, телепортация, супер руки и дополненная реальность.
Начало работы с AR
Чтобы создавать приложения AR в Интернете, вам необходимо добавить новую библиотеку с именем AR.js. Сначала вы загружаете A-кадр, за которым следует AR.js.
Вы должны настроить сцену с помощью A-frames a-scene -tag с добавлением artoolkit . sourceType должен быть вашей веб-камерой. С его помощью также поддерживается камера-шрифт вашего смартфона.
a-marker-camera -tag отмечает изображение внутри записанного экрана, который представляет изображение. В этом случае это marker.png . Когда камера обнаружит этот маркер, поле будет отображаться на маркере.
Ниже вы можете найти пример кода:
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script>
<script>
THREEx.ArToolkitContext.baseURL = 'https://rawgit.com/jeromeetienne/ar.js/master/three.js/'
</script>
<body>
<a-scene artoolkit='sourceType: webcam;'>
<a-box position='0 0 0.5' material='opacity: 0.5;'></a-box>
<a-marker-camera preset='marker.png'></a-marker-camera>
</a-scene>
</body>