SonarSystems · bunnybooboo · Mar 27, 2016 · Mar 27, 2016 · Mar 27, 2016 · Mar 27, 2016
diff --git a/README.md b/README.md
@@ -1,7 +1,123 @@
 # A-Frame WebVR Tutorials
 
 <ol>
-  <li>Setting Up</li>
+  <li>
+    Setting Up
+
+    <ul>
+      <li>Live preview - www.googledrive.com/host/0B58LaQNFXH6NNzZOWXU2ODh5XzA</li>
+    </ul>
+  </li>
 
-  <li>Drawing A Box</li>
+  <li>
+    Drawing A Box
+
+    <ul>
+      <li>Live preview - www.googledrive.com/host/0B58LaQNFXH6NQ0Y1NS1jYWZ3dkU</li>
+    </ul>
+  </li>
+
+  <li>
+    Transformations
+
+    <ul>
+      <li>Live preview - www.googledrive.com/host/0B58LaQNFXH6NNFJ1emhqNGYtaUE</li>
+    </ul>
+  </li>
+
+  <li>
+    Textures
+
+    <ul>
+      <li>Live preview - www.googledrive.com/host/0B58LaQNFXH6NVlVIT2FDc3hSQk0</li>
+    </ul>
+  </li>
+
+  <li>
+    Animations
+
+    <ul>
+      <li>Live preview - www.googledrive.com/host/0B58LaQNFXH6NYUJPMjBibGdEWGM</li>
+    </ul>
+  </li>
+
+  <li>
+    Interacting With Objects
+
+    <ul>
+      <li>Live preview - www.googledrive.com/host/0B58LaQNFXH6NVXNjaVVHb0RISHM</li>
+    </ul>
+  </li>
+
+  <li>
+    Lighting
+
+    <ul>
+      <li>Live preview - www.googledrive.com/host/0B58LaQNFXH6NOTgyZnd4SUZ1d3c</li>
+    </ul>
+  </li>
+
+  <li>
+    Skybox
+
+    <ul>
+      <li>Live preview - www.googledrive.com/host/0B58LaQNFXH6NMFNqeVFrbGRvNUk</li>
+    </ul>
+  </li>
+
+  <li>
+    Model Loading
+
+    <ul>
+      <li>Live preview - www.googledrive.com/host/0B58LaQNFXH6NcDRsSklHTkNKY0k</li>
+    </ul>
+  </li>
+
+  <li>
+    Image
+
+    <ul>
+      <li>Live preview - www.googledrive.com/host/0B58LaQNFXH6NNkx6WkczSFBNVVE</li>
+    </ul>
+  </li>
+
+  <li>
+    Curved Image
+
+    <ul>
+      <li>Live preview - www.googledrive.com/host/0B58LaQNFXH6NYWtFQnk5MG1BSVE</li>
+    </ul>
+  </li>
+
+  <li>
+    Video
+
+    <ul>
+      <li>Live preview - www.googledrive.com/host/0B58LaQNFXH6NNHBTV2lFSGppWjg</li>
+    </ul>
+  </li>
+
+  <li>
+    Video Sphere
+
+    <ul>
+      <li>Live preview - www.googledrive.com/host/0B58LaQNFXH6NbzZ2VFNfWTlJS1k</li>
+    </ul>
+  </li>
+
+  <li>
+    Plane
+
+    <ul>
+      <li>Live preview - www.googledrive.com/host/0B58LaQNFXH6NVElzY2VtZHJWcmc</li>
+    </ul>
+  </li>
+
+  <li>
+    Object Loading
+
+    <ul>
+      <li>Live preview - www.googledrive.com/host/0B58LaQNFXH6NdGJFQm5Ic3Brdm8</li>
+    </ul>
+  </li>
 </ol>
diff --git a/[10] Image/img/BatmanvSuperman.jpg b/[10] Image/img/BatmanvSuperman.jpg
diff --git a/[10] Image/index.html b/[10] Image/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <script src="https://aframe.io/releases/0.2.0/aframe.js"></script>
+    </head>
+
+    <body>
+        <a-scene>
+            <a-assets>
+                <img id="my-image" src="img/BatmanvSuperman.jpg">
+            </a-assets>
+
+            <!-- Using the asset management system. -->
+            <a-image src="#my-image" width="16" height="9"></a-image>
+
+            <!-- Defining the URL inline. Not recommended but more comfortable for web developers. -->
+            <!--<a-image src="img/BatmanvSuperman.jpg" width="16" height="9"></a-image>-->
+        </a-scene>
+    </body>
+</html>
diff --git a/[11] Curved Image/img/BatmanvSuperman.jpg b/[11] Curved Image/img/BatmanvSuperman.jpg
diff --git a/[11] Curved Image/index.html b/[11] Curved Image/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <script src="https://aframe.io/releases/0.2.0/aframe.js"></script>
+    </head>
+
+    <body>
+        <a-scene>
+            <a-assets>
+                <img id="my-image" src="img/BatmanvSuperman.jpg">
+            </a-assets>
+
+            <!-- Using the asset management system. -->
+            <a-curvedimage src="#my-image" height="15.0" radius="5.7" theta-length="361"
+                           rotation="0 150 0"
+                           scale="0.8 0.8 0.8"
+                           position="0 2 5"></a-curvedimage>
+
+            <!-- Defining the URL inline. Not recommended but more comfortable for web developers. -->
+            <!--<a-curvedimage src="img/BatmanvSuperman.jpg"></a-curved-image>-->
+        </a-scene>
+    </body>
+</html>
diff --git a/[12] Video/index.html b/[12] Video/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="apple-mobile-web-app-capable" content="yes">
+
+        <script src="https://aframe.io/releases/0.2.0/aframe.js"></script>
+    </head>
+
+    <body>
+        <a-scene>
+            <a-assets>
+                <video id="video" autoplay loop="true" src="video/Video.mp4" webkit-playsinline>
+            </a-assets>
+
+            <!-- Using the asset management system. -->
+            <a-video src="#video" width="16" height="9" position="0 1 -1"></a-video>
+
+            <!-- Defining the URL inline. Not recommended but more comfortable for web developers. -->
+            <!--<a-video src="video/Video.mp4" width="16" height="9" position="0 1 -1"></a-video>-->
+        </a-scene>
+    </body>
+</html>
diff --git a/[12] Video/video/Video.mp4 b/[12] Video/video/Video.mp4
diff --git a/[13] Video Sphere/index.html b/[13] Video Sphere/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="apple-mobile-web-app-capable" content="yes">
+
+        <script src="https://aframe.io/releases/0.2.0/aframe.js"></script>
+    </head>
+
+    <body>
+        <a-scene>
+            <a-assets>
+                <video id="SphereVideo" autoplay loop="true" src="video/SphereVideo.webm" webkit-playsinline>
+            </a-assets>
+
+            <!-- Using the asset management system. -->
+            <a-videosphere src="#SphereVideo"></a-videosphere>
+
+            <!-- Defining the URL inline. Not recommended but more comfortable for web developers. -->
+            <!--<a-videosphere src="video/SphereVideo.webm"></a-videosphere>-->
+        </a-scene>
+    </body>
+</html>
diff --git a/[13] Video Sphere/video/SphereVideo.webm b/[13] Video Sphere/video/SphereVideo.webm
diff --git a/[14] Plane/img/BatmanvSuperman.jpg b/[14] Plane/img/BatmanvSuperman.jpg
diff --git a/[14] Plane/index.html b/[14] Plane/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="apple-mobile-web-app-capable" content="yes">
+
+        <script src="https://aframe.io/releases/0.2.0/aframe.js"></script>
+    </head>
+
+    <body>
+        <a-scene>
+            <a-assets>
+                <img id="texture" src="img/BatmanvSuperman.jpg">
+            </a-assets>
+
+             <!-- Basic plane. -->
+            <a-plane color="red" height="20" width="20"></a-plane>
+            <!-- Textured plane. -->
+            <a-plane src="#texture" height="20" width="20"></a-plane>
+
+            <a-entity position="0 0 40">
+                <a-camera></a-camera>
+            </a-entity>
+        </a-scene>
+    </body>
+</html>
diff --git a/[15] Object Loading/index.html b/[15] Object Loading/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="apple-mobile-web-app-capable" content="yes">
+
+        <script src="https://aframe.io/releases/0.2.0/aframe.js"></script>
+
+        <style>
+            body
+            {
+                background-color: black;
+            }
+        </style>
+    </head>
+
+    <body>
+        <a-scene>
+             <a-assets>
+                <a-asset-item id="object" src="models/pokeball-vray.obj"></a-asset-item>
+                <a-asset-item id="material" src="models/pokeball-vray.mtl"></a-asset-item>
+            </a-assets>
+            <!-- Using the asset management system. -->
+            <a-obj-model src="#object" mtl="#material"></a-obj-model>
+            <!-- Defining the URL inline. Not recommended but may be more comfortable. -->
+            <!--obj-model src="models/pokeball-vray.obj" mtl="models/pokeball-vray.mtl"></a-obj-model>-->
+
+            <a-entity position="0 200 150">
+                <a-camera></a-camera>
+            </a-entity>
+        </a-scene>
+    </body>
+</html>
diff --git a/[15] Object Loading/models/pokeball-vray.mtl b/[15] Object Loading/models/pokeball-vray.mtl
@@ -0,0 +1,47 @@
+# Blender MTL File: 'None'
+# Material Count: 5
+
+newmtl Mat_4
+Ns 96.078431
+Ka 0.000000 0.000000 0.000000
+Kd 1.000000 1.000000 1.000000
+Ks 0.100000 0.100000 0.100000
+Ni 1.000000
+d 1.000000
+illum 2
+
+newmtl VR_Gray
+Ns 96.078431
+Ka 0.000000 0.000000 0.000000
+Kd 0.290000 0.290000 0.290000
+Ks 0.000000 0.000000 0.000000
+Ni 1.000000
+d 1.000000
+illum 2
+
+newmtl VR_Red
+Ns 96.078431
+Ka 0.000000 0.000000 0.000000
+Kd 1.000000 0.000000 0.000000
+Ks 0.066667 0.066667 0.066667
+Ni 1.000000
+d 1.000000
+illum 2
+
+newmtl VR_White
+Ns 96.078431
+Ka 0.000000 0.000000 0.000000
+Kd 1.000000 1.000000 1.000000
+Ks 0.066667 0.066667 0.066667
+Ni 1.000000
+d 1.000000
+illum 2
+
+newmtl VRayMtl
+Ns 96.078431
+Ka 0.000000 0.000000 0.000000
+Kd 0.498039 0.498039 0.498039
+Ks 0.000000 0.000000 0.000000
+Ni 1.000000
+d 1.000000
+illum 2