diff --git a/public/index.html b/public/index.html index 2ba52fc89f6766ab2f6aa21e503c80bec8944272..0a19463336baf20da9e0111d38f31c720442d624 100644 --- a/public/index.html +++ b/public/index.html @@ -27,16 +27,17 @@ let selectedModel = 'flower'; // Standardauswahl let models = {}; let reticle; + let scene, camera, renderer, session; 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 = new THREE.WebGLRenderer({ alpha: true, canvas, context: gl }); renderer.autoClear = false; - const scene = new THREE.Scene(); - const camera = new THREE.PerspectiveCamera(); + scene = new THREE.Scene(); + camera = new THREE.PerspectiveCamera(); camera.matrixAutoUpdate = false; // Licht hinzufügen @@ -61,7 +62,7 @@ }); // AR-Session starten - const session = await navigator.xr.requestSession('immersive-ar', { requiredFeatures: ['hit-test'] }); + session = await navigator.xr.requestSession('immersive-ar', { requiredFeatures: ['hit-test'] }); session.updateRenderState({ baseLayer: new XRWebGLLayer(session, gl) }); const referenceSpace = await session.requestReferenceSpace('local'); const viewerSpace = await session.requestReferenceSpace('viewer'); @@ -69,8 +70,6 @@ session.requestAnimationFrame(onXRFrame); - - // AR-Rendering function onXRFrame(time, frame) { session.requestAnimationFrame(onXRFrame); @@ -99,6 +98,18 @@ } } + // Modell platzieren + function placeModel() { + if (reticle.visible) { + const model = models[selectedModel]; + if (model) { + const clonedModel = model.clone(); + clonedModel.position.set(reticle.position.x, reticle.position.y, reticle.position.z); + scene.add(clonedModel); + } + } + } + // AR starten if (navigator.xr) { const startButton = document.createElement('button'); @@ -109,6 +120,9 @@ startButton.remove(); activateXR(); }; + + // Touch- oder Klick-Event, um das Modell zu platzieren + document.body.addEventListener('click', placeModel); } else { alert('WebXR wird nicht unterstützt.'); }