diff --git a/public/index.html b/public/index.html index 9767415c595d57c744723af7f156cfd1f5fb4bf0..0bc4afa68254e55611f30ab33f6a2a8532852d45 100644 --- a/public/index.html +++ b/public/index.html @@ -15,93 +15,97 @@ <button onclick="activateXR()">Start Hit to Place Demo</button> <script> async function activateXR() { - const canvas = document.createElement("canvas"); - document.body.appendChild(canvas); - const gl = canvas.getContext("webgl", {xrCompatible: true}); - - const scene = new THREE.Scene(); - - const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0); - directionalLight.position.set(10, 15, 10); - scene.add(directionalLight); - - const renderer = new THREE.WebGLRenderer({ - alpha: true, - preserveDrawingBuffer: true, - canvas: canvas, - context: gl - }); - renderer.autoClear = false; - - const camera = new THREE.PerspectiveCamera(); - camera.matrixAutoUpdate = false; - - const 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'); - const hitTestSource = await session.requestHitTestSource({ space: viewerSpace }); - - const loader = new THREE.GLTFLoader(); - let reticle; - loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/reticle/reticle.gltf", function(gltf) { - reticle = gltf.scene; - reticle.visible = false; - scene.add(reticle); - console.log("Reticle loaded successfully"); - }, undefined, function(error) { - console.error("Error loading reticle:", error); - }); - - let model; - loader.load("https://transfer.hft-stuttgart.de/pages/32esla1mpg/webarTTP/media/sunflower.gltf", function(gltf) { - model = gltf.scene; - console.log("Model loaded successfully"); - }, undefined, function(error) { - console.error("Error loading model:", error); - }); - - session.addEventListener("select", (event) => { - if (model && reticle.visible) { - const clone = model.clone(); - clone.position.copy(reticle.position); - scene.add(clone); - console.log("Model placed in scene"); - } - }); - - const 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); - - const hitTestResults = frame.getHitTestResults(hitTestSource); - if (hitTestResults.length > 0 && reticle) { - 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); - } else if (reticle) { - reticle.visible = false; + try { + const canvas = document.createElement("canvas"); + document.body.appendChild(canvas); + const gl = canvas.getContext("webgl", {xrCompatible: true}); + + const scene = new THREE.Scene(); + + const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0); + directionalLight.position.set(10, 15, 10); + scene.add(directionalLight); + + const renderer = new THREE.WebGLRenderer({ + alpha: true, + preserveDrawingBuffer: true, + canvas: canvas, + context: gl + }); + renderer.autoClear = false; + + const camera = new THREE.PerspectiveCamera(); + camera.matrixAutoUpdate = false; + + const 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'); + const hitTestSource = await session.requestHitTestSource({ space: viewerSpace }); + + const loader = new THREE.GLTFLoader(); + let reticle; + loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/reticle/reticle.gltf", function(gltf) { + reticle = gltf.scene; + reticle.visible = false; + scene.add(reticle); + console.log("Reticle loaded successfully"); + }, undefined, function(error) { + console.error("Error loading reticle:", error); + }); + + let model; + loader.load("https://transfer.hft-stuttgart.de/pages/32esla1mpg/webarTTP/media/sunflower.gltf", function(gltf) { + model = gltf.scene; + console.log("Model loaded successfully"); + }, undefined, function(error) { + console.error("Error loading model:", error); + }); + + session.addEventListener("select", (event) => { + if (model && reticle.visible) { + const clone = model.clone(); + clone.position.copy(reticle.position); + scene.add(clone); + console.log("Model placed in scene"); } - - renderer.render(scene, camera); - } - }; - session.requestAnimationFrame(onXRFrame); + }); + + const 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); + + const hitTestResults = frame.getHitTestResults(hitTestSource); + if (hitTestResults.length > 0 && reticle) { + 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); + } else if (reticle) { + reticle.visible = false; + } + + renderer.render(scene, camera); + } + }; + session.requestAnimationFrame(onXRFrame); + } catch (error) { + console.error("Error in activateXR:", error); + } } </script> </body>