Khalid Syfullah Zaman
Post-graduate student of University of Canberra studying Master of Information Technology and Systems, an Javascript enthusiast, Python beginner learner, React Native developer.
by
Khalid Syfullah Zaman
A-frame reduces Boilerplate
Import WebVR Polyfill
Set Up Camera
Set Up Screens
Initialize Screen
Declare and Pass Canvas
Listen to the Window Size
Install VR Effect
Create Render Loop
Figure out Responsiveness
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
</head>
<body>
<a-scene>
<!-- Write some A-frame codes!! !-->
</a-scene>
</body>
</html>// Box in three.js
var geometry = new THREE.BoxGeometry(1, 2, 3);
var material = new THREE.MeshStandardMaterial({color: 'red'});
var box = new THREE.Mesh(geometry, material);
box.position.set(10, 0, 10);
scene.add(box);<!-- Box in A-Frame.. !-->
<a-scene>
<a-box color="red" position="10 0 10"></a-box>
</a-scene>
Basic Components on A-frame
Now Let's Introduce with some of PRIMITIVES
<a-box color="#4CC3D9" position="-1 0.5 -3" rotation="0 45 0"></a-box>
HELLO WORLD
<a-cylinder color="#FFC65D" position="1 0.75 -3" radius="0.5" height="1.5"></a-cylinder>
<a-sphere color="#EF2D5E" position="0 1.25 -5" radius="1.25"></a-sphere>
<a-plane color="#7BC8A4" position="0 0 -4" rotation="-90 0 0" width="4" height="4"></a-plane>
<a-sky color="#ECECEC"></a-sky>OUTPUT
MORE PRIMITIVES!!!
<a-animation> <a-box> <a-camera> <a-circle> <a-collada-model>
<a-cone> <a-cursor> <a-curvedimage> <a-cylinder>
<a-dodecahedron> <a-isocahedron> <a-image> <a-light>
<a-obj-model> <a-plane> <a-ring> <a-tetrahedron> <a-torus>
<a-torus-knot> <a-sky> <a-sound> <a-sphere> <a-videosphere>
Another Example: A House
<a-assets>
<img id="house" src="images/Wall.jpg">
<img id="tin-roof" src="images/tin-roof.jpg">
<img id="window" src="images/background-texture.jpg">
<img id="light_wood" src="images/light_wood.png">
<img id="door" src="images/Door-Village.jpg">
</a-assets><!-- Roof Tin!-->
<a-plane position="1.8 4.5 -15" rotation="-45 90 0" width="12" height="5" src="#tin-roof">
</a-plane>
<a-plane position="1.8 4.5 -15" rotation="496 90 180" width="12" height="5" src="#tin-roof">
</a-plane>
<a-plane position="-1.75 4.5 -15" rotation="-45 -90 -180" width="12" height="5" src="#tin-roof">
</a-plane>
<a-plane position="-1.75 4.5 -15" rotation="405 90 0" width="12" height="5" src="#tin-roof">
</a-plane><!-- Mud House!-->
<a-plane position="0 3.4 -10.05" rotation="0 0 -45" width="4" height="4" src="#house">
</a-plane>
<a-plane position="0 3.4 -20.05" rotation="0 0 -45" width="4" height="4" src="#house">
</a-plane>
<a-plane position="0 3.4 -20.05" rotation="180 0 -45" width="4" height="4" src="#house">
</a-plane>
<a-box src="#house" width="5" height="7" depth="2.7" position="0 0 -15" rotation="0 90 0" scale="2 1 2">
</a-box><!-- Window!-->
<a-plane position="0 2.4 -9.9" rotation="0 0 0" width="1.5" height="2" src="#window">
</a-plane>
<a-plane position="-2.74 0.7 -17.5" rotation="0 -90 0" width="1.5" height="2" src="#window">
</a-plane>
<a-plane position="-2.74 0.7 -14.5" rotation="0 -90 0" width="1.5" height="2" src="#window">
</a-plane><!-- Door!-->
<a-plane position="-2.72 0.7 -12" rotation="0 -90 0" width="1.7" height="3" src="#door">
</a-plane>OUTPUT
One More Thing!!
<a-entity id="House" position="0 0 0">
<!-- Rest of the code!! !-->
</a-entity>THANK YOU!
A-Frame
By Khalid Syfullah Zaman
A-Frame
A-Frame is an open-source WebVR framework for creating virtual reality (VR) experiences with HTML. We can build VR scenes that work across smartphones, desktop, the Oculus Rift, and the room-scale HTC Vive.
