diff --git a/public/index.html b/public/index.html index 99d4d9a811046070c234fd208b62fc8737564310..5ccad9379ebd17231aa9ebf8c7fce1b3d9af7499 100644 --- a/public/index.html +++ b/public/index.html @@ -163,160 +163,8 @@ </div> </div> <script> - let selectedModel = 'robot'; // Start mit dem Roboter - let models = {}; - let reticle; - let lastClickTime = 0; // Zeit des letzten Klicks - const doubleClickThreshold = 300; // Zeitspanne für Doppelklick in Millisekunden - - function updateMenu() { - document.querySelectorAll('.menu-item').forEach(item => item.classList.remove('active')); - document.getElementById(`${selectedModel}-item`).classList.add('active'); - } - - function selectModel(modelId) { - selectedModel = modelId; - console.log(`Modell ausgewählt: ${selectedModel}`); - updateMenu(); - } - - async function activateXR() { - const canvas = document.createElement('canvas'); - document.body.appendChild(canvas); - const gl = canvas.getContext('webgl', { xrCompatible: true }); - const renderer = new THREE.WebGLRenderer({ alpha: true, canvas, context: gl }); - renderer.autoClear = false; - - const scene = new THREE.Scene(); - const camera = new THREE.PerspectiveCamera(); - camera.matrixAutoUpdate = false; - - // Licht hinzufügen - const light = new THREE.DirectionalLight(0xffffff, 1); - light.position.set(10, 10, 10); - scene.add(light); - - // Reticle (Cursor) - const loader = new THREE.GLTFLoader(); - loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/reticle/reticle.gltf", (gltf) => { - reticle = gltf.scene; - reticle.visible = false; - scene.add(reticle); - }); - - // Modelle laden - loader.load("https://threejs.org/examples/models/gltf/RobotExpressive/RobotExpressive.glb", (gltf) => { - models.robot = gltf.scene; - }); - loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/sunflower/sunflower.gltf", (gltf) => { - models.sunflower = gltf.scene; - }); - - // AR-Session starten - const session = await navigator.xr.requestSession('immersive-ar', { - optionalFeatures: ["dom-overlay"], - domOverlay: { root: document.body }, - requiredFeatures: ['hit-test'] - }); - session.updateRenderState({ baseLayer: new XRWebGLLayer(session, gl) }); - const referenceSpace = await session.requestReferenceSpace('local'); - const viewerSpace = await session.requestReferenceSpace('viewer'); - const hitTestSource = await session.requestHitTestSource({ space: viewerSpace }); - - // Menü sichtbar machen, wenn die AR-Session gestartet wird - document.getElementById('menu-bar').style.display = 'flex'; - - session.requestAnimationFrame(onXRFrame); - - session.addEventListener("select", (event) => { - if (!reticle) return; - - // Prüfen, ob es ein Doppelklick ist - const currentTime = Date.now(); - const timeDiff = currentTime - lastClickTime; - - if (timeDiff < doubleClickThreshold) { - // Doppelklick erkannt, Modell wechseln - selectedModel = selectedModel === 'robot' ? 'sunflower' : 'robot'; - console.log(`${selectedModel.charAt(0).toUpperCase() + selectedModel.slice(1)} ausgewählt`); - updateMenu(); - } else { - // Einzelner Klick – Modell platzieren - 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 - scene.add(clone); - console.log(`${selectedModel} platziert`); - } - } - - // Zeit des letzten Klicks aktualisieren - lastClickTime = currentTime; - }); - - session.addEventListener("end", () => { - console.log("AR-Session beendet"); - currentSession = null; - document.getElementById('menu-bar').style.display = 'none'; // Menü ausblenden - }); - - // AR-Rendering - function onXRFrame(time, frame) { - session.requestAnimationFrame(onXRFrame); - gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer); - - const pose = frame.getViewerPose(referenceSpace); - if (pose) { - const view = pose.views[0]; - const viewport = session.renderState.baseLayer.getViewport(view); - renderer.setSize(viewport.width, viewport.height); - - camera.matrix.fromArray(view.transform.matrix); - camera.projectionMatrix.fromArray(view.projectionMatrix); - camera.updateMatrixWorld(true); - - // Reticle Position - const hitTestResults = frame.getHitTestResults(hitTestSource); - if (hitTestResults.length > 0) { - const hitPose = hitTestResults[0].getPose(referenceSpace); - reticle.visible = true; - reticle.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z); - reticle.updateMatrixWorld(true); - } - - renderer.render(scene, camera); - } - } - } - - function exitAR() { - document.getElementById('confirmation-dialog').style.display = 'flex'; // Dialog anzeigen - } - - function confirmExit(shouldExit) { - if (shouldExit) { - if (currentSession) { - currentSession.end(); // Beende die AR-Session - } - } - document.getElementById('confirmation-dialog').style.display = 'none'; // Dialog ausblenden - } - - // AR starten - if (navigator.xr) { - const startButton = document.createElement('button'); - startButton.textContent = 'Start AR'; - startButton.style.cssText = "position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 15px; font-size: 18px;"; - document.body.appendChild(startButton); - startButton.onclick = () => { - startButton.remove(); - activateXR(); - }; - } else { - alert('WebXR wird nicht unterstützt.'); - } - + let currentSession = null; + // Restlicher Code siehe oben </script> </body>