diff --git a/public/index.html b/public/index.html index 0dce93ce6eaa7819023e45cdfff4b2eb0a23e08a..19fe59f3cb1cd3af4303208d25a2aa6f81c70848 100644 --- a/public/index.html +++ b/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) => {