What is aframe?? Before I get this I like to ask from you, Did you ever have to 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 web framework that can develop many things. It is primarily 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 a 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, Blender.
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 the whole spectrum A-frame aims to define fully immersive interactive VR experience that goes beyond 360º content, making full use of positional tracking and controllers.
History
As I mentioned before A-Frame was developed by the 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.
Benefits
1. 3D and VR content authoring with HTML without build 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 the scene with one line of HTML (<a-scene>) to handle canvas renderer, render logo, lights, controls, WebVR setup.
Now the interesting part begins 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 a .html file and include A-Frame in the <head>
Here are some examples,
1. Hello WebVR Code
A-Frame is a web framework for building virtual reality (VR) experience. This web frame is an open-source web framework that can develop many things. It is primarily 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 a 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, Blender.
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 the whole spectrum A-frame aims to define fully immersive interactive VR experience that goes beyond 360º content, making full use of positional tracking and controllers.
History
As I mentioned before A-Frame was developed by the 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.
Benefits
1. 3D and VR content authoring with HTML without build 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 the scene with one line of HTML (<a-scene>) to handle canvas renderer, render logo, lights, controls, WebVR setup.
Now the interesting part begins 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 a .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,
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 build 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 smartphones.
4. Entity-Component Architecture
A-Frame is a powerful three.js framework, providing a declarative, composable, reusable entity-component structure. HTML is just the tip of the iceberg; developers have unlimited access to JavaScript, DOM APIs, three.js, WebVR, and WebGL.
5. Performance
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 a 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 to A-Frame.
~Randika Madhushan
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 build 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 smartphones.
4. Entity-Component Architecture
A-Frame is a powerful three.js framework, providing a declarative, composable, reusable entity-component structure. HTML is just the tip of the iceberg; developers have unlimited access to JavaScript, DOM APIs, three.js, WebVR, and WebGL.
5. Performance
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 a 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 to A-Frame.
~Randika Madhushan
Comments
Post a Comment