Skip to content

Aframe WEBVR

How to Preview VR in Browser

 

 

   

Left Right png images | PNGWing

Use arrows keys to navigate on your laptop or computer

Creating a WEBVR Environment

We will use the following tags

  • <a-scene>: The <a-scene> element represents a scene. All entities are contained within the scene, which is the global root object.
  • <a-assets>: A-Frame has an asset management system that allows us to place our assets in one place and to preload and cache assets for better performance.
  • <a-plane>: The plane primitive creates flat surfaces using the geometry component with the type set to plane.
  • <a-sky>: The sky primitive adds a background color or 360° image to a scene. A sky is a large sphere with a color or texture mapped to the inside.
  • Link to the latest AFRME library: https://aframe.io/releases/1.3.0/aframe.min.js”

 

The Code

<!DOCTYPE html>

<html>
<head>
<!–Aframe Latest Library link–>
<scriptsrc=”https://aframe.io/releases/1.3.0/aframe.min.js”></script>
</head>
<body>
<!– The <a-scene> element represents a scene. All entities are contained within the scene, which is the global root object.–>
<a-scene>
<!–A-Frame has an asset management system that allows us to place our assets in one place and to preload and cache assets for better performance.–>

<a-assets>

<img id=”floor”src=”images/gground.jpeg”>

<img id=”sunny-sky”src=”images/nsky.jpeg”>

</a-assets>

<!–The plane primitive creates flat surfaces using the geometry component with the type set to plane.–>

<a-plane src=”#floor”repeat=”100 100″rotation=”-90 0 0″scale=”100 100″></a-plane>

<!–The sky primitive adds a background color or 360° image to a scene. A sky is a large sphere with a color or texture mapped to the inside.–>

<a-sky src=”#sunny-sky”rotation=”0 64 0″></a-sky>

</a-scene>

</body>
</html>
Download Code & Resources

Adding Primitive Shapes to a VR Enviornment

We will use the following tags

  • <a-scene>: The <a-scene> element represents a scene. All entities are contained within the scene, which is the global root object.
  • <a-assets>: A-Frame has an asset management system that allows us to place our assets in one place and to preload and cache assets for better performance.
  • <a-plane>: The plane primitive creates flat surfaces using the geometry component with the type set to plane.
  • <a-sky>: The sky primitive adds a background color or 360° image to a scene. A sky is a large sphere with a color or texture mapped to the inside.
  • <a-box> To create a cube and apply texture
  • <a-sphere> To create a sphere and add texture
  • Link to the latest AFRME library: https://aframe.io/releases/1.3.0/aframe.min.js”

Positioning in WEBVR

A-Frame uses a right-handed coordinate system

Position values represent the 3D axes.

X – Y – Z

Code

<!doctype html>
<html>
<head>
<title>L04 – Basic primitives and HTML attributes</title>
<scriptsrc=”https://aframe.io/releases/1.3.0/aframe.min.js”></script>
</head>
<body>
<a-scene>
<!–Assets–>
<a-assets>
<imgid=”sky”src=”images/sky.jpg”>
<imgid=”floor”src=”images/floor.jpg”>
<imgid=”wood”src=”images/text2.jpeg”>
<imgid=”sphere”src=”images/spheretext.jpg”>
</a-assets>
<!–Sky–>
<a-sky src=”#sky”></a-sky>
<!–Ground–>
<a-plane rotation=”-90 0 0 “src=”#floor”scale=”100 100”></a-plane>
<!– Box –>
<a-box src=”#wood”width=”4″height=”6″depth=”4″position=”0 3 -8″>
</a-box>s
<!–sphere–>
<a-sphere src=”#sphere”radius=”2″position=”0 8 -8″>
</a-sphere>
</a-scene>
</body>
</html>
Download Code and Resources

Example

WEBVR Physics (Gravity)

In this tutorial, I would like to share how to make use of physics in WEBVR simulating earth’s gravity.

In this tutorial, we will make use of:

AFrame and Aframe Physics Library:

  • https://aframe.io/releases/1.0.4/aframe.min.js
  • https://unpkg.com/aframe-physics-system@1.4.3/dist/aframe-physics-system.min.js
  • restitution element
  • Position and rotation attributes
  • Applying physics elements such as Dynamic bode and static body

Explanation Dynamic, Static Body an Restituition

  • dynamic-body: A freely-moving object. Dynamic bodies have mass, collide with other objects, bounce or slow during collisions, and fall if gravity is enabled.
  • static-body: A fixed-position or animated object. Other objects may collide with static bodies, but static bodies themselves are unaffected by gravity and collisions.
  • The restitution  is the bounciness value of the objects that fall on the floor

CODE

<!DOCTYPE html>
<html lang=”en”>
<head>
<metacharset=”UTF-8″>
<metaname=”viewport”content=”width=device-width, initial-scale=1.0″>
<title>Physics1</title>
<script src=”https://aframe.io/releases/1.0.4/aframe.min.js”></script>
<script src=”https://unpkg.com/aframe-physics-system@1.4.3/dist/aframe-physics-system.min.js”></script>
</head>
<body>
<a-scene physics=”gravity: -9.8; restitution:0.7″>
<!–Box–>
<a-boxposition=”1 4 -3″rotation=”0 45 0″color=”#4cc300″dynamic-body></a-box>
<a-boxposition=”-1 4 -3″rotation=”0 45 0″color=”#4cc3d9″dynamic-body></a-box>
<a-boxposition=”-1 8 -3″rotation=”0 45 0″color=”#4cc300″dynamic-body></a-box>
<a-boxposition=”-1 10 -3″rotation=”0 45 0″color=”#4cc3d9″dynamic-body></a-box>
<a-toruscolor=”#43a367″arc=”360″radius=”2″radius-tubular=”0.1″position=”0 2 -5″>
<a-animationattribute=”rotation”to=”0 360 0″repeat=”indefinite”dur=”3000″easing=”linear”></a-animation>
</a-torus>
<!–plane–>
<a-plane position=”0 0 -4″rotation=”-90 0 0″width=”5″height=”4″color=”green”static-body></a-plane>
<a-skycolor=”#7bc8a4″></a-sky>
</a-box>
</a-scene>
</body>
</html>

Positioning

In this part, we will learn how to position shapes, point of view and make use of light. New elements/properties that we will be using are:

  • <a-entity>
  • <a-light> Properties:  type – look-at

Code:

<!DOCTYPE html>
<html>
<head>
<scriptsrc=”aframe.min.js”></script>
</head>
<body>
<a-scene>
<a-assest>
<imgid=”stone”src=”images/stone.jpg”>
<imgid=”floor”src=”images/floor.jpg”>
</a-assest>
<a-entityposition=”0 0 -5″>
<!–Box1–>
<a-boxcolor=”white”width=”1.5″height=”1.5″depth=”1.5″position=”-0.75 0.5 0″rotation=”20 45 0″src=”#stone”animation=”property: pos; to: 1 8 -10; dur: 2000; easing: linear; loop: true”></a-box>
<!–box2–>
<a-boxcolor=”white”width=”1.5″height=”1.5″depth=”1.5″position=”1.4 0.5 0″rotation=”20 -45 0″src=”#stone”></a-box>
<!–box3–>
<a-boxcolor=”white”width=”1.5″height=”1.5″depth=”1.5″position=”0.05 2.02 -0.1″rotation=”20 25 0″src=”#stone”></a-box>
<!–Lights–>
<a-lighttype=”spot”color=”white”position=”5 10 3″look-at=”a-box”></a-light>
<a-lighttype=”point”color=”red”position=”-5 5 7″look-at=”a-box”></a-light>
<!–sky–>
<a-skycolor=”black”></a-sky>
<!–Ground–>
<a-planerotation=”-90 0 0″position=”2 -2 -2″src=”#floor”width=”60″height=”60″depth=”2″></a-plane>
</a-entity>
</a-scene>
</body>
</html>



Physics in Aframe

In this example of Aframe physics, we will look at bodies that are both still and moving. In Aframe physics, a “static body” is a solid object that other objects can’t pass through. When an object is a “dynamic body” it can be moved, grabbed, and thrown away.

In this exercise we will use the following libraries:

  1. <script src=”https://unpkg.com/aframe-physics-system@1.4.3/dist/aframe-physics-system.min.js”></script>
  2. <script src=”https://unpkg.com/super-hands@2.0.2/dist/super-hands.min.js”></script>
  3. <script src=”https://cdn.rawgit.com/donmccurdy/aframe-extras/v3.13.1/dist/aframe-extras.min.js”></script>

Library 1 is for the use of Physics such as dynamic-body, static-body and settings for gravity

Library 2 is to create a cursor for interaction

Library 3 is the main Aframe library

This exercise will show 3 shapes: a blue cube on the right, a red cube on the left, and a green sphere in the middle. The blue cube is set to be a “static body.” This means that anything that hits it won’t go through, and the shape won’t move. Since the red cube is set to have a “dynamic body,” any object that hits it will not go through but will cause it to move. The green sphere is set to be grabbable and have a dynamic body. This means that you can grab it with the cursor and move it around. Use the code below to try it out.

Code:

  1. <!DOCTYPE html>
  2. <html lang=”en”>
  3. <head>
  4. <meta charset=”UTF-8″>
  5. <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
  6. <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
  7. <title>Document</title>
  8. <script src=”https://aframe.io/releases/1.0.4/aframe.min.js”></script>
  9. <script src=”https://unpkg.com/aframe-physics-system@1.4.3/dist/aframe-physics-system.min.js”></script>
  10. <script src=”https://unpkg.com/super-hands@2.0.2/dist/super-hands.min.js”></script>
  11. <script src=”https://cdn.rawgit.com/donmccurdy/aframe-extras/v3.13.1/dist/aframe-extras.min.js”></script>
  12. </head>
  13. <body>
  14. <a-scene physics=”gravity: -9.8″>
  15. <a-assets>
  16. <img id=”ground” src=”images/floor.jpg”>
  17.       </a-assets>
  18. <a-entity>
  19. <a-camera progressive-controls position=”0 0 5″></a-camera>
  20. </a-entity>
  21. <!–Ground–>
  22. <a-plane src=”#ground” scale=”50 50 1″ repeat=”5 5 1″ rotation=”-90 0 0″ static-body></a-plane>
  23. <!–Red Box –>
  24. <a-box color=”red” position=”-3.5 4 -4″ dynamic-body></a-box>
  25. <!–Blue Box–>
  26. <a-box color=”blue” position=”3.5 0.5 -4″ static-body=”shape: sphere; sphereRadius:1″></a-box>
  27. <!–Green Sphere–>
  28. <a-sphere color=”green” radius=”0.5″ position=”-1 4 -4″ grabbable dynamic-body></a-sphere>
  29. <a-plane color=”green” rotation=”-90 0 0″ position=”-1 4 0″ static-body></a-plane>
  30. </a-scene>
  31. </body>
  32. </html>