diff --git a/public/index.html b/public/index.html index f5bb43d147b2e1812ebb8be512eb96be16367002..e254a13e765f22c80ca4ab8a03c7a4265df658ba 100644 --- a/public/index.html +++ b/public/index.html @@ -118,15 +118,6 @@ directionalLight.position.set(10, 15, 10); scene.add(directionalLight); - // Menü direkt vor der Kamera -const menuGeometry = new THREE.PlaneGeometry(2, 0.5); -const menuMaterial = new THREE.MeshBasicMaterial({ color: 0x2196F3 }); -const menu = new THREE.Mesh(menuGeometry, menuMaterial); - -// Platzierung direkt vor der Kamera -menu.position.set(0, 1.5, -2); -scene.add(menu); - const renderer = new THREE.WebGLRenderer({ alpha: true, preserveDrawingBuffer: true, @@ -176,6 +167,13 @@ scene.add(menu); } }); + // Menü vor der Kamera hinzufügen + let menu; + const menuGeometry = new THREE.PlaneGeometry(2, 0.5); + const menuMaterial = new THREE.MeshBasicMaterial({ color: 0x2196F3 }); + menu = new THREE.Mesh(menuGeometry, menuMaterial); + scene.add(menu); + const onXRFrame = (time, frame) => { session.requestAnimationFrame(onXRFrame); gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer); @@ -190,6 +188,16 @@ scene.add(menu); camera.projectionMatrix.fromArray(view.projectionMatrix); camera.updateMatrixWorld(true); + // Menü vor der Kamera platzieren + const cameraPosition = new THREE.Vector3(); + camera.getWorldPosition(cameraPosition); + const cameraDirection = new THREE.Vector3(); + camera.getWorldDirection(cameraDirection); + + menu.position.copy(cameraPosition); + menu.position.add(cameraDirection.multiplyScalar(2)); // 2 Meter vor der Kamera + menu.lookAt(cameraPosition); + const hitTestResults = frame.getHitTestResults(hitTestSource); if (hitTestResults.length > 0 && reticle) { const hitPose = hitTestResults[0].getPose(referenceSpace);