Add new file

b3434cd4 · Alfakhori · 9ae2527d · b3434cd4
Commit b3434cd4 authored May 02, 2023 by Alfakhori
--- a/public/page1.html
+++ b/public/page1.html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>AR.js Location-Based Example</title>
+  <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@argonjs/argon@4.0.0/dist/argon.min.js"></script>
+  <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
+  <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
+  <script src="https://unpkg.com/@seregpie/VueGestures@1.0.0/dist/vue-gestures.umd.min.js"></script>
+  <script src="https://unpkg.com/@seregpie/VueDraggableResizable@2.2.0/dist/vue-draggable-resizable.umd.min.js">
+  </script>
+  <style>
+    #info {
+      position: absolute;
+      top: 20px;
+      width: 100%;
+      text-align: center;
+      z-index: 1;
+    }
+
+    #arjsDebugUIContainer {
+      position: absolute;
+      bottom: 5px;
+      left: 5px;
+      z-index: 1;
+    }
+
+    .draggable {
+      border: 2px solid blue;
+      position: absolute;
+      background-color: rgba(255, 255, 255, 0.8);
+      padding: 10px;
+    }
+  </style>
+</head>
+<body>
+  <a-scene
+    vr-mode-ui="enabled: false"
+    arjs="debugUIEnabled: false; sourceType: webcam; debug: true; patternRatio: 0.75; detectionMode: mono_and_matrix;"
+  >
+    <a-marker
+      preset="custom"
+      type="barcode"
+      barcode-value="4"
+      id="marker1"
+      emitevents="true"
+      location-based="latitude: 37.7749; longitude: -122.4194; altitude: 0;"
+    >
+      <a-entity
+        id="model1"
+        gltf-model="url(/models/duck/scene.gltf)"
+        scale="0.1 0.1 0.1"
+      ></a-entity>
+    </a-marker>
+  </a-scene>
+
+  <div id="info">
+    <p>Loading...</p>
+  </div>
+
+  <div id="arjsDebugUIContainer"></div>
+
+  <script>
+    const scene = document.querySelector("a-scene");
+    const marker1 = document.querySelector("#marker1");
+    const model1 = document.querySelector("#model1");
+    const info = document.querySelector("#info");
+
+    // Wait for marker to load before displaying content
+    marker1.addEventListener("markerFound", (e) => {
+      info.style.display = "none";
+    });
+
+    // When the marker is lost, display the info again
+    marker1.addEventListener("markerLost", (e) => {
+      info.style.display = "block";
+    });
+  </script>
+</body>
+</html>