From 29376b2cde77ef2554134e75a40b5ea9484062b5 Mon Sep 17 00:00:00 2001
From: Cantuerk <21caog1bif@hft-stuttgart.de>
Date: Thu, 19 Dec 2024 15:11:21 +0000
Subject: [PATCH] Update public/index.html

---
 public/index.html | 47 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/public/index.html b/public/index.html
index 79630be..aa6d9ee 100644
--- a/public/index.html
+++ b/public/index.html
@@ -59,11 +59,46 @@
       background-color: #387a39;
     }
 
+    #menu {
+      display: none;
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      background: rgba(0, 0, 0, 0.7);
+      justify-content: center;
+      align-items: center;
+      padding: 10px;
+      gap: 15px;
+      overflow-x: auto;
+      z-index: 1000; /* Sicherstellen, dass über canvas liegt */
+    }
+    #menu img {
+      width: 50px;
+      height: 50px;
+      cursor: pointer;
+      border-radius: 5px;
+      border: 2px solid transparent;
+      transition: transform 0.2s, border-color 0.2s;
+    }
+    #menu img:hover {
+      transform: scale(1.2);
+      border-color: #fff;
+    }
+    #menu img.selected {
+      border-color: #4CAF50;
+    }
+
   </style>
   <script src="https://unpkg.com/three@0.126.0/build/three.js"></script>
   <script src="https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js"></script>
 </head>
 <body>
+  <div id="menu">
+    <img src="robot-preview.png" alt="Robot" data-model="robot" onclick="setModel('robot')">
+    <img src="sunflower-preview.png" alt="Sunflower" data-model="sunflower" onclick="setModel('sunflower')">
+  </div>
+  
   <script>
     let selectedModel = 'robot'; // Start mit dem Roboter
     let models = {};
@@ -72,6 +107,9 @@
     const doubleClickThreshold = 300; // Zeitspanne für Doppelklick in Millisekunden
 
     async function activateXR() {
+      // Menü sichtbar machen
+      document.getElementById('menu').style.display = 'flex';
+  
       const canvas = document.createElement('canvas');
       document.body.appendChild(canvas);
       const gl = canvas.getContext('webgl', { xrCompatible: true });
@@ -160,6 +198,8 @@
             reticle.visible = true;
             reticle.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
             reticle.updateMatrixWorld(true);
+          } else {
+            reticle.visible = false;
           }
 
           renderer.render(scene, camera);
@@ -167,6 +207,13 @@
       }
     }
 
+    function setModel(modelName) {
+      selectedModel = modelName;
+      document.querySelectorAll('#menu img').forEach(img => img.classList.remove('selected'));
+      document.querySelector(`#menu img[data-model="${modelName}"]`).classList.add('selected');
+      console.log(`Modell gewechselt zu: ${modelName}`);
+    }
+
     // AR starten
     if (navigator.xr) {
       const startButton = document.createElement('button');
-- 
GitLab