diff --git a/public/index.html b/public/index.html index b8880da3f34062d10700be89d1a052ccbf28dfd9..feb479d76e80ccc2db2a676d3d1b08217d70fbea 100644 --- a/public/index.html +++ b/public/index.html @@ -4,7 +4,7 @@ GeoVis AR Projekt - @@ -87,7 +67,6 @@ let selectedModel = 'car'; // Standardauswahl let models = {}; let reticle; - let menu; async function activateXR() { const canvas = document.createElement('canvas'); @@ -121,32 +100,6 @@ models.lamp = gltf.scene; }); - // 3D-Menü erstellen - const menuGeometry = new THREE.PlaneGeometry(0.5, 0.2); // Menügröße - const menuMaterial = new THREE.MeshBasicMaterial({ color: 0x333333, opacity: 0.8, transparent: true }); - menu = new THREE.Mesh(menuGeometry, menuMaterial); - menu.position.set(0, -0.5, -1); // Unten im Kamerasichtfeld - scene.add(menu); - - // Menü-Buttons als Flächen - const buttonGeometry = new THREE.PlaneGeometry(0.15, 0.1); - const buttonMaterial1 = new THREE.MeshBasicMaterial({ color: 0x2196F3 }); - const buttonMaterial2 = new THREE.MeshBasicMaterial({ color: 0xFF9800 }); - - const carButton = new THREE.Mesh(buttonGeometry, buttonMaterial1); - carButton.position.set(-0.2, -0.5, -0.99); // Links unten - scene.add(carButton); - - const lampButton = new THREE.Mesh(buttonGeometry, buttonMaterial2); - lampButton.position.set(0.2, -0.5, -0.99); // Rechts unten - scene.add(lampButton); - - - - // Raycaster für Button-Interaktion - const raycaster = new THREE.Raycaster(); - const pointer = new THREE.Vector2(); - // AR-Session starten const session = await navigator.xr.requestSession('immersive-ar', { requiredFeatures: ['hit-test'] }); session.updateRenderState({ baseLayer: new XRWebGLLayer(session, gl) }); @@ -159,24 +112,8 @@ session.addEventListener("select", (event) => { if (!reticle) return; - // Raycaster von der Kameraposition (Mitte des Bildschirms) - raycaster.setFromCamera(pointer, camera); - const intersects = raycaster.intersectObjects([carButton, lampButton]); - - // Prüfen, ob ein Button getroffen wurde - if (intersects.length > 0) { - const clickedButton = intersects[0].object; - - if (clickedButton === carButton) { - selectedModel = 'car'; - console.log('Auto ausgewählt'); - } else if (clickedButton === lampButton) { - selectedModel = 'lamp'; - console.log('Laterne ausgewählt'); - } - } // Kein Button getroffen -> Modell platzieren - else if (models[selectedModel]) { + if (models[selectedModel]) { const clone = models[selectedModel].clone(); clone.position.copy(reticle.position); clone.scale.set(0.5, 0.5, 0.5); // Größe anpassen @@ -200,13 +137,6 @@ camera.projectionMatrix.fromArray(view.projectionMatrix); camera.updateMatrixWorld(true); - // Menü bleibt fixiert vor der Kamera - menu.position.set(0, -0.5, -1); - menu.lookAt(camera.position); - - carButton.position.set(-0.2, -0.5, -0.99); - lampButton.position.set(0.2, -0.5, -0.99); - const hitTestResults = frame.getHitTestResults(hitTestSource); if (hitTestResults.length > 0) { const hitPose = hitTestResults[0].getPose(referenceSpace);