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?

Thank you!

A-Frame framework [big]

By Salman Rahman Desh

A-Frame framework [big]

WebVR development framework developed by Mozilla.

  • 821
Loading comments...

More from Salman Rahman Desh