What is aframe?? Before i get this i like to ask from you, Did you ever have get a virtual reality? Someones are Yes! or Not!, Do you like to get that experience? So here it is.
A-Frame is a web framework for building virtual reality (VR) experience. This web frame is an open source webframe work who can develop many things. It is primary maintained by Mozilla and WebVR community. But originally from Mozilla. A-Frame was developed to be an easy but powerful and easy way to develop VR content. As an open source project, A-Frame has grown to be one of the largest and most welcoming VR communities.
A-Frame is based on top of HTML, simple to get started. But A-Frame is not just 3D scene graph or markup language. It is an entity component system framework for three.js where developers can create 3D WebVR scenes using HTML.
Nowadays HTML provides a familiar tool for web developers and designers while incorporating a popular game development pattern used by Game engines such as Unity.
A-Frame supports most VR headsets such as Rift, Vive, Windows Mixed Reality, Daydream, Cardboard, GearVR and can even be used for augmented reality.
Although A-Frame supports yhe whole spectrum but A-frame aims to define fully immersive interactive VR experience that go beyond 360º content, making full use of positional tracking and controllers.
History
As i mentioned before A-Frame was developed by Mozilla VR team during mid-to-late 2015. A-Frame crew was Deigo Marcos, Josh Carpenter, Casey Yee, Chris Van Wiemeersch and kevin Ngo. A-Frame's public release was on December 16, 2015.
Benifits
1. 3D and VR content authoring with HTML without buils steps.
2. Visual inspector tool that can be invoked in the browser from any live A-Frame scene.
3. Compatibility with most existing web libraries and frameworks (React Js, Angular Js, D3.js, Vue.js).
4. Setup of scene with one line of HTML (<a-scene>) to handle canvas renderer, render logo, lights, controls, WebVR setup.
Now the interesting part begin here!
Getting Started
A-Frame can be developed from a plain HTML file without having to install anything. There is a great way to try online code editor, that instantly hosts and deploys for free (try it now) and also you can download it on github.
The installation page provides more options for getting started with A-Frame.
To get started learning A-Frame, check out A-Frame School for visual setup-by-setup lessons to complete documentation.
First create an .html file and include A-Frame in the <head>
Here are some examples,
1. Hello WebVR Code
2. Shopping
There is another example, it is called Shopping.
and short video,
Here is the code to Shopping,
Some pictures of it,
Features of A-Frame
1. 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 buils setups.
2. Declarative HTML
HTML is easy to read, understand and copy-and-past. Being based on top of HTML, A-Frame is accessible to everyone, such as web developers, VR enthusiasts, artists, designers, educators etc.
3. Cross-Platform VR
Build VR applications for Vive, Rift, Windows Mixed Reality, Daydream, Gear VR and Cardboard with support for all respective controls. Don't have a headset or controls? don't worry it is work on standard desktop and smart phones.
4. Entity-Component Architecture
A-Frame is a powerful three.js framework, providing a declarative, compostable, reusable entity-component structure. HTML is just the tip of the iceberg; developers have unlimited access to JavaScript, DOM API's, three.js, WebVR, and WebGL.
5. Perfomance
A-Frame is optimized from the ground up for WebVR. While A-Frame uses the DOM, it's 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).
6. Tool Agnostic
Since the web was built on the notation of HTML, A-Frame is compatible with most libraries, frameworks and tools including React, Preact, Vue.js, d3.js, Ember.js,jQuery.
7. Visual Inspector
A-frame provides a built-in visual 3D inspector. Open up any A-Frame scene, and hit <ctrl>+<alt>+i
8. Components
Hit the ground running with A-Frame's core components such as geometries, materials, lights, animations, models, ray casters, shadows, positional audio, text and Vive | Touch | Windows Motion etc.
For more details refer A-Frame.
~Randika Madhushan
A-Frame is a web framework for building virtual reality (VR) experience. This web frame is an open source webframe work who can develop many things. It is primary maintained by Mozilla and WebVR community. But originally from Mozilla. A-Frame was developed to be an easy but powerful and easy way to develop VR content. As an open source project, A-Frame has grown to be one of the largest and most welcoming VR communities.
A-Frame is based on top of HTML, simple to get started. But A-Frame is not just 3D scene graph or markup language. It is an entity component system framework for three.js where developers can create 3D WebVR scenes using HTML.
Nowadays HTML provides a familiar tool for web developers and designers while incorporating a popular game development pattern used by Game engines such as Unity.
A-Frame supports most VR headsets such as Rift, Vive, Windows Mixed Reality, Daydream, Cardboard, GearVR and can even be used for augmented reality.
Although A-Frame supports yhe whole spectrum but A-frame aims to define fully immersive interactive VR experience that go beyond 360º content, making full use of positional tracking and controllers.
History
As i mentioned before A-Frame was developed by Mozilla VR team during mid-to-late 2015. A-Frame crew was Deigo Marcos, Josh Carpenter, Casey Yee, Chris Van Wiemeersch and kevin Ngo. A-Frame's public release was on December 16, 2015.
Benifits
1. 3D and VR content authoring with HTML without buils steps.
2. Visual inspector tool that can be invoked in the browser from any live A-Frame scene.
3. Compatibility with most existing web libraries and frameworks (React Js, Angular Js, D3.js, Vue.js).
4. Setup of scene with one line of HTML (<a-scene>) to handle canvas renderer, render logo, lights, controls, WebVR setup.
Now the interesting part begin here!
Getting Started
A-Frame can be developed from a plain HTML file without having to install anything. There is a great way to try online code editor, that instantly hosts and deploys for free (try it now) and also you can download it on github.
The installation page provides more options for getting started with A-Frame.
To get started learning A-Frame, check out A-Frame School for visual setup-by-setup lessons to complete documentation.
First create an .html file and include A-Frame in the <head>
Here are some examples,
1. Hello WebVR Code
<html>
<head>
<script src="https://aframe.io/releases/0.8.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">
<head>
<script src="https://aframe.io/releases/0.8.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-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
 |
| Hello WebVR code with Preview |
 |
| A-Frame tutorial, Hello WebVR |
2. Shopping
There is another example, it is called Shopping.
and short video,
Here is the code to Shopping,
Some pictures of it,
 |
| figure 1 |
 |
| figure 2 |
1. 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 buils setups.
2. Declarative HTML
HTML is easy to read, understand and copy-and-past. Being based on top of HTML, A-Frame is accessible to everyone, such as web developers, VR enthusiasts, artists, designers, educators etc.
3. Cross-Platform VR
Build VR applications for Vive, Rift, Windows Mixed Reality, Daydream, Gear VR and Cardboard with support for all respective controls. Don't have a headset or controls? don't worry it is work on standard desktop and smart phones.
4. Entity-Component Architecture
A-Frame is a powerful three.js framework, providing a declarative, compostable, reusable entity-component structure. HTML is just the tip of the iceberg; developers have unlimited access to JavaScript, DOM API's, three.js, WebVR, and WebGL.
5. Perfomance
A-Frame is optimized from the ground up for WebVR. While A-Frame uses the DOM, it's 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).
6. Tool Agnostic
Since the web was built on the notation of HTML, A-Frame is compatible with most libraries, frameworks and tools including React, Preact, Vue.js, d3.js, Ember.js,jQuery.
7. Visual Inspector
A-frame provides a built-in visual 3D inspector. Open up any A-Frame scene, and hit <ctrl>+<alt>+i
8. Components
Hit the ground running with A-Frame's core components such as geometries, materials, lights, animations, models, ray casters, shadows, positional audio, text and Vive | Touch | Windows Motion etc.
~Randika Madhushan
Comments
Post a Comment