Skip to content

WEBVR-Lesson 1

What you will learn about WEBVR in Lesson One:

 

  1. About WEBVR
  2. Set up HTML page for WEB VR
  3. Create 3D Shapes and attributes
  4. Positioning of shapes
  5. Applying Texture to shapes
  6. Create a WEBVR environment
WEB VR

How to setup HTML page for WEBVR

Copy and paste the code below into your HTML blank page using your HTML code editor. Once completed, save the file as “lesson1.html.”

 

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>lesson 1</title>

<script src=”https://aframe.io/releases/1.0.4/aframe.min.js”></script>

<script src=”//cdn.rawgit.com/donmccurdy/aframe-physics-system/v4.0.1/dist/aframe-physics-system.min.js”></script>

<script src=”//cdn.rawgit.com/donmccurdy/aframe-extras/v6.0.0/dist/aframe-extras.min.js”></script>

<script src=”https://unpkg.com/super-hands@3.0.0/dist/super-hands.min.js”></script>

<script src=”js/progressive-controls.js”></script>

<script src=”https://unpkg.com/aframe-look-at-component@0.8.0/dist/aframe-look-at-component.min.js”></script>
</head>

<body>

</body>

</html>

 

 

How to create 3D shapes – List of shapes:

 

Positioning – Axes values

Values “0 0 0”

Value 1 = X axes

Value 2 = Y axes

Value 3 = Z axes