A-frame - The base CUBE

Sunday, 09 April 2017 | Written by  |

Like a first, you must be really patient with this great framework. On the web Aframe.io is very good documentation with few examples. But is there many thinks, which can waste your time.

In my case is best way to learn new thinks on examples. Like a first, we work with normal BOX item.

For BOX we dont need our 3d model. Its html element <a-box></a-box>

Example

This is absolutely, but wunderfull start. Red cube before us.. Thanks to A-frame framework is WebVR simple. Few rows of code.

Complete code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>WebVR.center - Example</title>  
    <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
  </head>
  
  <body>
    <a-scene> 
         <a-box position="0 0 -5" color="red"></a-box>
    </a-scene>
  </body>

</html>

Please keep on mind this important thinks.

Each file with A-frame need script part with .js which controle all base functions between head tags.

 <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>

After body element must be <a-scene></a-scene> - all parts of other VR html code are between this tags.

<a-box></a-box> - Our CUBE

With this tag you can do boxes, cubes, or walls easily. But have on mind, that you must set up few base parametrs.

  1. set up position - without this, you will see nothing. When you set position to 0 0 0 - > you will be on top of the cube, because you have no camera set up... So you must rotate to view you cube.. better is set third dimension to -5.
  2. set up color - because your cube is primary white and background is white too... So set your color parametr to some color.

Other paramers are optional.

Best think on A-frame is the fact, that you could see your result immediatelly in your mobile headset without another setting.

In next post we will set another paramterers to base cube.

 

© 2017 WebooVR by Weboo.eu. All rights reserved