Cleanup XR examples (playcanvas#1974)

Maksims · web-flow · commit 3226086c9649 · 2020-04-08T11:36:19.000+01:00
* cleanup examples

* tidy up css
diff --git a/examples/xr/ar-basic.html b/examples/xr/ar-basic.html
@@ -13,15 +13,14 @@
                 overflow: hidden;
             }
             canvas {
-                width:100%;
-                height:100%;
-
+                width: 100%;
+                height: 100%;
             }
             .message {
                 position: absolute;
                 padding: 8px 16px;
                 left: 20px;
-                bottom: 0px;
+                bottom: 20px;
                 color: #ccc;
                 background-color: rgba(0, 0, 0, .5);
                 font-family: "Proxima Nova", Arial, sans-serif;
@@ -31,30 +30,7 @@
 
     <body>
         <canvas id="application-canvas"></canvas>
-        <div>
-            <p class="message"></p>
-        </div>
-        <script>
-            // draw some axes
-            var drawAxes = function (pos, scale) {
-                var color = new pc.Color(1,0,0);
-
-                var axis = new pc.Vec3();
-                var end = new pc.Vec3().copy(pos).add(axis.set(scale,0,0));
-
-                app.renderLine(pos, end, color);
-
-                color.set(0, 1, 0);
-                end.sub(axis.set(scale,0,0)).add(axis.set(0,scale,0));
-                app.renderLine(pos, end, color);
-
-                color.set(0, 0, 1);
-                end.sub(axis.set(0,scale,0)).add(axis.set(0,0,scale));
-                app.renderLine(pos, end, color);
-            }
-        </script>
-
-
+        <div class="message"></div>
         <script>
             var message = function (msg) {
                 var el = document.querySelector('.message');
diff --git a/examples/xr/ar-hit-test.html b/examples/xr/ar-hit-test.html
@@ -13,15 +13,14 @@
                 overflow: hidden;
             }
             canvas {
-                width:100%;
-                height:100%;
-
+                width: 100%;
+                height: 100%;
             }
             .message {
                 position: absolute;
                 padding: 8px 16px;
                 left: 20px;
-                bottom: 0px;
+                bottom: 20px;
                 color: #ccc;
                 background-color: rgba(0, 0, 0, .5);
                 font-family: "Proxima Nova", Arial, sans-serif;
@@ -31,30 +30,7 @@
 
     <body>
         <canvas id="application-canvas"></canvas>
-        <div>
-            <p class="message"></p>
-        </div>
-        <script>
-            // draw some axes
-            var drawAxes = function (pos, scale) {
-                var color = new pc.Color(1,0,0);
-
-                var axis = new pc.Vec3();
-                var end = new pc.Vec3().copy(pos).add(axis.set(scale,0,0));
-
-                app.renderLine(pos, end, color);
-
-                color.set(0, 1, 0);
-                end.sub(axis.set(scale,0,0)).add(axis.set(0,scale,0));
-                app.renderLine(pos, end, color);
-
-                color.set(0, 0, 1);
-                end.sub(axis.set(0,scale,0)).add(axis.set(0,0,scale));
-                app.renderLine(pos, end, color);
-            }
-        </script>
-
-
+        <div class="message"></div>
         <script>
             var message = function (msg) {
                 var el = document.querySelector('.message');
diff --git a/examples/xr/vr-basic.html b/examples/xr/vr-basic.html
@@ -13,15 +13,14 @@
                 overflow: hidden;
             }
             canvas {
-                width:100%;
-                height:100%;
-
+                width: 100%;
+                height: 100%;
             }
             .message {
                 position: absolute;
                 padding: 8px 16px;
                 left: 20px;
-                bottom: 0px;
+                bottom: 20px;
                 color: #ccc;
                 background-color: rgba(0, 0, 0, .5);
                 font-family: "Proxima Nova", Arial, sans-serif;
@@ -31,30 +30,7 @@
 
     <body>
         <canvas id="application-canvas"></canvas>
-        <div>
-            <p class="message"></p>
-        </div>
-        <script>
-            // draw some axes
-            var drawAxes = function (pos, scale) {
-                var color = new pc.Color(1,0,0);
-
-                var axis = new pc.Vec3();
-                var end = new pc.Vec3().copy(pos).add(axis.set(scale,0,0));
-
-                app.renderLine(pos, end, color);
-
-                color.set(0, 1, 0);
-                end.sub(axis.set(scale,0,0)).add(axis.set(0,scale,0));
-                app.renderLine(pos, end, color);
-
-                color.set(0, 0, 1);
-                end.sub(axis.set(0,scale,0)).add(axis.set(0,0,scale));
-                app.renderLine(pos, end, color);
-            }
-        </script>
-
-
+        <div class="message"></div>
         <script>
             var message = function (msg) {
                 var el = document.querySelector('.message');
diff --git a/examples/xr/vr-controllers.html b/examples/xr/vr-controllers.html
@@ -13,15 +13,14 @@
                 overflow: hidden;
             }
             canvas {
-                width:100%;
-                height:100%;
-
+                width: 100%;
+                height: 100%;
             }
             .message {
                 position: absolute;
                 padding: 8px 16px;
                 left: 20px;
-                bottom: 0px;
+                bottom: 20px;
                 color: #ccc;
                 background-color: rgba(0, 0, 0, .5);
                 font-family: "Proxima Nova", Arial, sans-serif;
@@ -31,30 +30,7 @@
 
     <body>
         <canvas id="application-canvas"></canvas>
-        <div>
-            <p class="message"></p>
-        </div>
-        <script>
-            // draw some axes
-            var drawAxes = function (pos, scale) {
-                var color = new pc.Color(1,0,0);
-
-                var axis = new pc.Vec3();
-                var end = new pc.Vec3().copy(pos).add(axis.set(scale,0,0));
-
-                app.renderLine(pos, end, color);
-
-                color.set(0, 1, 0);
-                end.sub(axis.set(scale,0,0)).add(axis.set(0,scale,0));
-                app.renderLine(pos, end, color);
-
-                color.set(0, 0, 1);
-                end.sub(axis.set(0,scale,0)).add(axis.set(0,0,scale));
-                app.renderLine(pos, end, color);
-            }
-        </script>
-
-
+        <div class="message"></div>
         <script>
             var message = function (msg) {
                 var el = document.querySelector('.message');
diff --git a/examples/xr/vr-movement.html b/examples/xr/vr-movement.html
@@ -13,15 +13,14 @@
                 overflow: hidden;
             }
             canvas {
-                width:100%;
-                height:100%;
-
+                width: 100%;
+                height: 100%;
             }
             .message {
                 position: absolute;
                 padding: 8px 16px;
                 left: 20px;
-                bottom: 0px;
+                bottom: 20px;
                 color: #ccc;
                 background-color: rgba(0, 0, 0, .5);
                 font-family: "Proxima Nova", Arial, sans-serif;
@@ -31,30 +30,7 @@
 
     <body>
         <canvas id="application-canvas"></canvas>
-        <div>
-            <p class="message"></p>
-        </div>
-        <script>
-            // draw some axes
-            var drawAxes = function (pos, scale) {
-                var color = new pc.Color(1,0,0);
-
-                var axis = new pc.Vec3();
-                var end = new pc.Vec3().copy(pos).add(axis.set(scale,0,0));
-
-                app.renderLine(pos, end, color);
-
-                color.set(0, 1, 0);
-                end.sub(axis.set(scale,0,0)).add(axis.set(0,scale,0));
-                app.renderLine(pos, end, color);
-
-                color.set(0, 0, 1);
-                end.sub(axis.set(0,scale,0)).add(axis.set(0,0,scale));
-                app.renderLine(pos, end, color);
-            }
-        </script>
-
-
+        <div class="message"></div>
         <script>
             var message = function (msg) {
                 var el = document.querySelector('.message');
diff --git a/examples/xr/xr-picking.html b/examples/xr/xr-picking.html
@@ -13,15 +13,14 @@
                 overflow: hidden;
             }
             canvas {
-                width:100%;
-                height:100%;
-
+                width: 100%;
+                height: 100%;
             }
             .message {
                 position: absolute;
                 padding: 8px 16px;
                 left: 20px;
-                bottom: 0px;
+                bottom: 20px;
                 color: #ccc;
                 background-color: rgba(0, 0, 0, .5);
                 font-family: "Proxima Nova", Arial, sans-serif;
@@ -31,30 +30,7 @@
 
     <body>
         <canvas id="application-canvas"></canvas>
-        <div>
-            <p class="message"></p>
-        </div>
-        <script>
-            // draw some axes
-            var drawAxes = function (pos, scale) {
-                var color = new pc.Color(1,0,0);
-
-                var axis = new pc.Vec3();
-                var end = new pc.Vec3().copy(pos).add(axis.set(scale,0,0));
-
-                app.renderLine(pos, end, color);
-
-                color.set(0, 1, 0);
-                end.sub(axis.set(scale,0,0)).add(axis.set(0,scale,0));
-                app.renderLine(pos, end, color);
-
-                color.set(0, 0, 1);
-                end.sub(axis.set(0,scale,0)).add(axis.set(0,0,scale));
-                app.renderLine(pos, end, color);
-            }
-        </script>
-
-
+        <div class="message"></div>
         <script>
             var message = function (msg) {
                 var el = document.querySelector('.message');
