✨ feat(app): add marker version

seigedigital · Aug 17, 2024 · 290f591 · 290f591
1 parent 304250f
commit 290f591
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 4 deletions.
diff --git a/assets/markerCard.fset → assets/image.fset b/assets/markerCard.fset → assets/image.fset
diff --git a/assets/markerCard.fset3 → assets/image.fset3 b/assets/markerCard.fset3 → assets/image.fset3
diff --git a/assets/markerCard.iset → assets/image.iset b/assets/markerCard.iset → assets/image.iset
diff --git a/assets/markerCard.jpeg → assets/image.jpeg b/assets/markerCard.jpeg → assets/image.jpeg
diff --git a/assets/marker.png b/assets/marker.png
diff --git a/assets/modelViewer-env.jpg → assets/model.jpg b/assets/modelViewer-env.jpg → assets/model.jpg
diff --git a/markerCard.html → image.html b/markerCard.html → image.html
@@ -21,7 +21,7 @@
         embedded arjs='trackingMethod: best; sourceType: webcam; debugUIEnabled: false;'>
 
         <a-nft
-            type='nft' url='assets/trex'
+            type='nft' url='assets/image'
             smooth='true' smoothCount='10' smoothTolerance='0.01' smoothThreshold='5'>
             <a-entity
                 gltf-model='assets/bridge-v2.glb'

diff --git a/marker.html b/marker.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
+    <!-- we import arjs version without NFT but with marker + location based support -->
+    <script src="https://raw.githack.com/AR-js-org/AR.js/dev/aframe/build/aframe-ar.js"></script>
+    <body style="margin : 0px; overflow: hidden;">
+        <a-scene embedded arjs>
+        <a-marker preset="hiro">
+            <a-entity
+            position="0 0 0"
+            rotation="0 90 0"
+            scale="0.05 0.05 0.05"
+            gltf-model="assets/bridge-v2.glb"
+            ></a-entity>
+        </a-marker>
+        <a-entity camera></a-entity>
+        </a-scene>
+    </body>
+</html>
diff --git a/modelViewer.html → model.html b/modelViewer.html → model.html
@@ -16,16 +16,16 @@
     <!-- src="assets/Astronaut.glb" -->
     <model-viewer
     style='width: 100vw; height: 80vh;'
-    src="assets/bridge-v2.glb"
+    src="assets/bridge-v2-draco.gltf"
     ar
     poster="assets/bridge.webp"
     ar-scale="fixed"
     touch-action="pan-y"
     shadow-intensity="2"
     shadow-softness="0"
     camera-controls
-    skybox-image="assets/modelViewer-env.jpg"
-    skybox-height="2m"
+    skybox-image="assets/model.jpg"
+    skybox-height="50m"
     max-camera-orbit="auto 90deg auto"
     xr-environment></model-viewer>
   </body>