From ce3001452b65ffa5f4548deee066ca6d07422d17 Mon Sep 17 00:00:00 2001
From: raphaelNachtlicht <raphael.benz92@gmail.com>
Date: Wed, 27 Nov 2024 14:55:00 +0100
Subject: [PATCH] from ar.js example

---
 mooncal/index.html | 110 +++++++++++++++++++++------------------------
 1 file changed, 51 insertions(+), 59 deletions(-)
diff --git a/mooncal/index.html b/mooncal/index.html
index e45a503..85b9c42 100644
--- a/mooncal/index.html
+++ b/mooncal/index.html
@@ -1,62 +1,54 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>AR Application - Pattern Recognition</title>
-    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/gh/jeromeetienne/ar.js@3.3.2/aframe/build/aframe-ar.min.js"></script>
-    <style>
-      body {
-        margin: 0;
-        overflow: hidden;
-      }
-      #error-message {
-        display: none;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        color: white;
-        font-size: 18px;
-        background-color: rgba(0, 0, 0, 0.8);
-        padding: 20px;
-        border-radius: 8px;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="error-message">
-      Please allow camera access to use the AR application.
-    </div>
+<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1.3.0/dist/aframe-master.min.js"></script>
+<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
 
-    <a-scene embedded arjs>
-      <!-- Marker Definition -->
-      <a-marker 
-        preset="custom" 
-        type="pattern" 
-        url="./marker.patt">
-        <!-- Indicator for Pattern Recognition -->
-        <a-box 
-          position="0 0.5 0" 
-          material="color: green">
-        </a-box>
-      </a-marker>
+<style>
+  .arjs-loader {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.8);
+    z-index: 9999;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 
-      <!-- AR.js Camera -->
-      <a-entity camera></a-entity>
-    </a-scene>
+  .arjs-loader div {
+    text-align: center;
+    font-size: 1.25em;
+    color: white;
+  }
+</style>
 
-    <script>
-      // Check if AR.js initializes properly
-      document.querySelector('a-scene').addEventListener('loaded', () => {
-        console.log('AR.js is ready');
-        document.getElementById('error-message').style.display = 'none';
-      });
-
-      // Handle camera errors
-      navigator.mediaDevices.getUserMedia({ video: true }).catch((err) => {
-        console.error('Camera access error:', err);
-        document.getElementById('error-message').style.display = 'block';
-      });
-    </script>
-  </body>
-</html>
+<body style="margin : 0px; overflow: hidden;">
+  <!-- minimal loader shown until image descriptors are loaded -->
+  <div class="arjs-loader">
+    <div>Loading, please wait...</div>
+  </div>
+  <a-scene
+    vr-mode-ui="enabled: false;"
+    renderer="logarithmicDepthBuffer: true; precision: medium;"
+    embedded
+    arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
+  >
+    <!-- we use cors proxy to avoid cross-origin problems ATTENTION! you need to set up your server -->
+    <a-nft
+      type="nft"
+      url="your-server/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/trex-image/trex"
+      smooth="true"
+      smoothCount="10"
+      smoothTolerance=".01"
+      smoothThreshold="5"
+    >
+      <a-entity
+        gltf-model="your-server/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
+        scale="5 5 5"
+        position="150 300 -100"
+      >
+      </a-entity>
+    </a-nft>
+    <a-entity camera></a-entity>
+  </a-scene>
+</body>
\ No newline at end of file
