A-Frame
by
Salman Rahman Desh
Tech Speaker & Representative @Mozilla
twitter: Salman_Desh
What is VR?
Virtual Reality
- Computer technology
- Simulated environment
- Three dimension
VR experience
Gaming, Architecture, Education and so on...
VR Devices
HTC VIVE
OCULUS RIFT
GOOGLE CARDBOARD
GOOGLE VR HEADSET
SONY MORPHEUS
MI VR
SAMSUNG GEAR VR
Build VR with
A-Frame
WebGL
Three.js
Others JS frameworks
A-Frame
360 Web!
360 Video Audio Primitives Components
Primitives
Circle Sphere Cylinder
Box Camera
Image Video
Torus Plane
Ring Sound Sky
- radius
- Height
- Width
- Height
- radiusTop
- radiusBottom
- Height
- radius
- radius
- radiusTubular
- arc
- radiusInner
- radiusOuter
image
video
camera
light
obj
Components
position (x, y, z)
rotation (x, y, z)
visible
Fog
sound
obj-model
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello, World! • A-Frame</title>
<script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box height="1" width="1" depth="1" color="red"></a-box>
<a-sphere color="blue" radius="1.25"></a-sphere>
</a-scene>
</body>
</html>
<a-scene>
<a-entity position="0 1 0">
<a-box color="red" height="1" width="1" depth="1"></a-box>
<a-light><a-light>
<a-camera></a-camera>
</a-entity>
</a-scene>Entity & Components
Entity Component System Pattern
Entity
Component
System
Alam [Entity]
Hero = Primitives & Components
Fighting
Duet song
System
Class management, providing global scope and services
Animation
<a-animation attribute="rotation"
from="0 -30 0"
to="0 330 0"
dur="20000"
repeat="indefinite">
</a-animation>Assets
<a-scene>
<a-assets>
<img id="pic" src="photo.jpg"></img>
<video id="vid" src="video.mp4"></video>
<sound id="audio" src="music.mp3"></sound>
<a-asset-item id="asset" src="action.obj"></a-asset-item>
</a-assets>
</a-scene>Font!
<!--BMFONT!-->
<script src="https://rawgit.com/bryik/aframe-bmfont-text-component
/master/dist/aframe-bmfont-text-component.min.js"></script>
<a-entity bmfont="text: Hello!"></a-entity>
<!--RAWGIT!-->
<script src="https://rawgit.com/ngokevin/aframe-text-component
/master/dist/aframe-text-component.min.js"></script>
<a-entity bmfont="text: Hello!"></a-entity>
<a-entity text="text: Hello!; size:0.7;"></a-entity>
OK, What's about
coding preview
in real time?
Boom! goes the
A-Frame
Inspector
<ctrl> + <alt> + i
https://aframe.io/
Let's do some fun?!
tiny.cc/aframe-multi
Sounds Cool?!
Join us on Slack!!
https://aframevr-slack.herokuapp.com/
Question?
