Update public/index.html

public/index.html

@@ -153,6 +153,9 @@
     <div class="menu-item" id="lantern-item" onclick="selectModel('tree')">
       <img src="previewImages/tree.png" alt="Baum" style="width: 50px; height: 50px;">
     </div>
+    <div class="menu-item" id="zipModel-item" onclick="selectModel('zipModel')">
+      <img src="previewImages/zipModel.png" alt="zipModel" style="width: 50px; height: 50px;">
+    </div>
     <div class="menu-item" id="exit-item" onclick="exitAR()">
       <img src="previewImages/exit.png" alt="Exit" style="width: 50px; height: 50px;">
     </div>
@@ -203,6 +206,30 @@
       light.position.set(10, 10, 10);
       scene.add(light);
 
+        // Dynamisches Laden eines Modells aus ZIP-Datei
+  const status = document.getElementById('status');
+  status.textContent = "Lade Modell aus ZIP-Datei...";
+
+  try {
+    const zipUrl = './assets/models/model.zip'; // Relativer Pfad zur ZIP-Datei
+    const files = await loadAndUnpackZip(zipUrl);
+    const gltfFile = Object.keys(files).find((filename) => filename.endsWith('.gltf'));
+
+    if (!gltfFile) {
+      throw new Error('Keine glTF-Datei in der ZIP gefunden.');
+    }
+
+    loader.load(files[gltfFile], (gltf) => {
+      const zipModel = gltf.scene;
+      zipModel.scale.set(0.5, 0.5, 0.5); // Skaliere das Modell
+      scene.add(zipModel);
+      status.textContent = "Modell erfolgreich geladen!";
+    });
+  } catch (error) {
+    console.error('Fehler beim Laden der ZIP-Datei:', error);
+    status.textContent = "Fehler beim Laden der ZIP-Datei.";
+  }
+
       // Reticle (Cursor)
       const loader = new THREE.GLTFLoader();
       loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/reticle/reticle.gltf", (gltf) => {