aframe Getting started with aframe
Remarks
This section provides an overview of what aframe is, and why a developer might want to use it.
It should also mention any large subjects within aframe, and link out to the related topics. Since the Documentation for aframe is new, you may need to create initial versions of those related topics.
Versions
A-Frame 0.x
| Version | Release Date |
|---|---|
| 0.6 | 2017-05-25 |
| 0.5 | 2017-02-10 |
| 0.4 | 2016-12-17 |
| 0.3 | 2016-08-18 |
Legacy Versions
| Version | Release Date |
|---|---|
| 0.2 | 2016-03-26 |
| 0.1 | 2015-12-17 |
Features
VR Made Simple
Just drop in a script tag and a-scene . A-Frame will handle 3D boilerplate, VR setup, and default controls. Nothing to install, no build steps.
Declarative HTML
HTML is easy to read, understand, and copy-and-paste. Being based on top of HTML, A-Frame is accessible to everyone: web developers, VR enthusiasts, artists, designers, educators, makers, kids.
Cross-Platform VR
Build VR applications for Vive, Rift, Daydream, GearVR, and Cardboard with support for all respective controllers. Don’t have a headset or controllers? No problem! A-Frame still works on standard desktop and smartphones.
Entity-Component Architecture
A-Frame is a powerful three.js framework, providing a declarative, composable, reusable entity-component structure.js. HTML is just the tip of the iceberg; developers have unlimited access to JavaScript, DOM APIs, three.js, WebVR, and WebGL.
Performance
A-Frame is optimized from the ground up for WebVR. While A-Frame uses the DOM, its elements don’t touch the browser layout engine. 3D object updates are all done in memory with little overhead under a single requestAnimationFrame call. For reference, see A-Painter, a Tilt Brush clone built in A-Frame that runs like native (90+ FPS).
Tool Agnostic
Since the Web was built on the notion of the HTML, A-Frame is compatible with most libraries, frameworks, and tools including React, Preact, Vue.js, Angular, d3.js, Ember.js, jQuery.
Visual Inspector
A-Frame provides a handy built-in visual 3D inspector. Open up any A-Frame scene, hit ctrl + alt + i, and fly around to peek behind the hood!
Registry
Take powerful components that developers have published and plug them in straight from HTML. Similar to the Unity Asset Store, the A-Frame Registry collects and curates these components for easy discovery.
Components
Hit the ground running with A-Frame’s core components such as geometries, materials, lights, animations, models, raycasters, shadows, positional audio, text, and Vive / Touch / Daydream / GearVR / Cardboard controls. Get even further with community components such as particle systems, physics, multiuser, oceans, mountains, speech recognition, motion capture, teleportation, super hands, and augmented reality.
Getting started
A-Frame can be developed from a plain HTML file without having to install anything! A great way to try out A-Frame to remix the starter example on Glitch, an online code editor that instantly hosts and deploys for free. Or create an .html file and include A-Frame in the 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>
Include the JS Build
To include A-Frame into an HTML file, we drop a script tag pointing to the CDN build:
<head>
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
</head>
Install from npm
We can also install A-Frame through npm:
$ npm install aframe
Then we can bundle A-Frame into our application. For example, with Browserify or Webpack:
require('aframe');
If you use npm, you can use angle, a command line interface for A-Frame. angle can initialize a scene template with a single command:
npm install -g angle && angle initscene
Getting started for AR
To create AR applications on the web, you need to add a new library named AR.js. First you load A-frame followed by AR.js.
Newt you must setup you scene using the A-frames a-scene -tag with the artoolkit -attribute added. The sourceType must be your webcam. The font-camera of your smartphone is also supported using this.
the a-marker-camera -tag marks an image inside the recorded screen that represents an image. In this case it's marker.png . When the camera detects this marker the box will be displayed on the marker.
Below you could find the example code:
<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>
