Upload New File

55383a6c · Faizi · 824f454a · 55383a6c
Commit 55383a6c authored Jun 25, 2024 by Faizi
--- a/public/1-Cube.html
+++ b/public/1-Cube.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AR.js Example</title>
+  <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
+  <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.7.6/aframe/build/aframe-ar.js"></script>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      text-align: center;
+      background-color: #f4f4f4;
+      margin: 0;
+      padding: 0;
+    }
+    .button {
+      background-color: #003366;
+      color: white;
+      padding: 15px 25px;
+      margin: 10px;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 16px;
+    }
+    .button:hover {
+      background-color: #0055aa;
+    }
+    .hidden {
+      display: none;
+    }
+  </style>
+</head>
+<body>
+  <button class="button" onclick="activateXR()">Start AR Scene</button>
+  <button class="button" onclick="captureScene()">Capture Scene</button>
+  
+  <a-scene embedded arjs class="hidden">
+    <a-marker preset="hiro">
+      <a-box position="0 0.5 0" material="color: red" animation="property: rotation; to: 360 360 360; loop: true; dur: 10000"></a-box>
+    </a-marker>
+    <a-entity camera></a-entity>
+  </a-scene>
+
+  <script>
+    function activateXR() {
+      const scene = document.querySelector("a-scene");
+      scene.classList.remove("hidden");
+    }
+
+    function captureScene() {
+      const canvas = document.querySelector("canvas");
+      if (canvas) {
+        const dataURL = canvas.toDataURL("image/png");
+        const link = document.createElement("a");
+        link.href = dataURL;
+        link.download = "AR_Scene.png";
+        link.click();
+      } else {
+        alert("No AR scene to capture!");
+      }
+    }
+  </script>
+</body>
+</html>
+