✨ feat(app):use logging + local js sources

seigedigital · Jun 20, 2024 · 4b67305 · 4b67305
1 parent 006f30d
commit 4b67305
Show file tree

Hide file tree

Showing 8 changed files with 122,874 additions and 157 deletions.
diff --git a/assets/aframe-ar.js b/assets/aframe-ar.js
diff --git a/assets/aframe.js b/assets/aframe.js
diff --git a/assets/aframe_1.6.0.js b/assets/aframe_1.6.0.js
diff --git a/assets/ar-threex-location-only.js b/assets/ar-threex-location-only.js
diff --git a/index.html b/index.html
@@ -9,23 +9,17 @@
     <link rel="apple-touch-icon" href="/assets/apple-touch-icon-180x180.png" sizes="180x180">
     <link rel="mask-icon" href="/assets/favicon.svg" color="#FFFFFF">
     <meta name="theme-color" content="#ffffff">
-    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
-    <script type='text/javascript' src='https://raw.githack.com/AR-js-org/AR.js/master/three.js/build/ar-threex-location-only.js'></script>
-    <script type='text/javascript' src='https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js'></script>
+    <!-- A-Frame itself -->
+    <script src="./assets/aframe.js"></script>
+    <!-- Pure three.js code that the A-Frame components use for location-based AR -->
+    <script type='text/javascript' src='./assets/ar-threex-location-only.js'></script>
+     <!-- AR.js A-Frame components -->
+    <script type='text/javascript' src='./assets/aframe-ar.js'></script>
   </head>
   <body>
-    <br><br>
-    <label for="latitude">Latitude:</label>
-    <input type="number" id="latitude" step="0.000001">
-    <br>
-    <label for="longitude">Longitude:</label>
-    <input type="number" id="longitude" step="0.000001">
-    <br>
-    <label for="scale">Scale:</label>
-    <input type="number" id="scale">
-    <br><br>
-    <button id="refresh-btn">Refresh</button>
-    <br><br>
+    <div>
+      <pre id="log" style='float: right; background: wheat; height: 100vh; padding-top: 100px;'></pre>
+    </div>
     <a-scene
       vr-mode-ui='enabled: false'
       renderer="logarithmicDepthBuffer: true;"
@@ -53,15 +47,30 @@
     </a-scene>
 
     <script>
-      document.getElementById("refresh-btn").addEventListener("click", function() {
-        const latitudeInput = document.getElementById("latitude");
-        const longitudeInput = document.getElementById("longitude");
-        const scaleInput = document.getElementById("scale");
-        const entityItem = document.getElementById("entity");
+      (function () {
+          var old = console.log;
+          var logger = document.getElementById('log');
+          console.log = function () {
+            for (var i = 0; i < arguments.length; i++) {
+              if (typeof arguments[i] == 'object') {
+                  logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(arguments[i], undefined, 2) : arguments[i]) + '<br />';
+              } else {
+                  logger.innerHTML += arguments[i] + '<br />';
+              }
+            }
+          }
+      })();
+
+      function handleOrientation(event) {
+        console.log("deviceorientation absolute: " + event.absolute);
+        console.log("deviceorientation alpha: " + event.alpha);
+        console.log("deviceorientation beta: " + event.beta);
+        console.log("deviceorientation gamma: " + event.gamma);
+
+      }
+
+      window.addEventListener("deviceorientation", handleOrientation);
 
-        entityItem.setAttribute("gps-new-entity-place", `latitude: ${latitudeInput.value}; longitude: ${longitudeInput.value}`);
-        entityItem.setAttribute("scale", `${scaleInput.value} ${scaleInput.value} ${scaleInput.value}`);
-      });
     </script>
   </body>
 </html>
diff --git a/index2.html b/index2.html
diff --git a/index2draco.html b/index2draco.html
diff --git a/test.html b/test.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <title>Blaues Wunder</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
+    <link rel="alternate icon" href="/assets/favicon.ico" type="image/png" sizes="16x16">
+    <link rel="apple-touch-icon" href="/assets/apple-touch-icon-180x180.png" sizes="180x180">
+    <link rel="mask-icon" href="/assets/favicon.svg" color="#FFFFFF">
+    <meta name="theme-color" content="#ffffff">
+    <!-- A-Frame itself -->
+    <script src="./assets/aframe_1.6.0.js"></script>
+    <!-- Pure three.js code that the A-Frame components use for location-based AR -->
+    <script type='text/javascript' src='./assets/ar-threex-location-only.js'></script>
+     <!-- AR.js A-Frame components -->
+    <script type='text/javascript' src='./assets/aframe-ar.js'></script>
+  </head>
+  <body>
+    <div>
+      <pre id="log" style='float: right; background: wheat; height: 100vh; padding-top: 100px;'></pre>
+    </div>
+
+    <a-scene stats arjs="sourceType: webcam; debugUIEnabled: false;">
+      <a-assets>
+        <a-asset-item id="bridge" src="./assets/bridge-v2-draco.gltf"></a-asset-item>
+      </a-assets>
+
+      <a-entity camera look-controls rotation-reader>
+        <a-entity gltf-model="#bridge" position="0 0 -5" scale="0.1 0.1 0.1"></a-entity>
+      </a-entity>
+    </a-scene>
+    <script>
+      (function () {
+          var old = console.log;
+          var logger = document.getElementById('log');
+          console.log = function () {
+            for (var i = 0; i < arguments.length; i++) {
+              if (typeof arguments[i] == 'object') {
+                  logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(arguments[i], undefined, 2) : arguments[i]) + '<br />';
+              } else {
+                  logger.innerHTML += arguments[i] + '<br />';
+              }
+            }
+          }
+      })();
+
+      function handleOrientation(event) {
+        console.log("deviceorientation absolute: " + event.absolute);
+        console.log("deviceorientation alpha: " + event.alpha);
+        console.log("deviceorientation beta: " + event.beta);
+        console.log("deviceorientation gamma: " + event.gamma);
+
+      }
+
+      window.addEventListener("deviceorientation", handleOrientation);
+
+    </script>
+  </body>
+</html>