From bd1026db5327d49bf33bf93176c471e61f92dde7 Mon Sep 17 00:00:00 2001 From: Rahman <22raya1mpg@hft-stuttgart.de> Date: Sat, 22 Jun 2024 08:27:59 +0000 Subject: [PATCH] Update index.html --- public/index.html | 37 +++++++++++++++++++++---------------- 1 file changed, 21 insertions(+), 16 deletions(-) diff --git a/public/index.html b/public/index.html index d24b73e..b8be792 100644 --- a/public/index.html +++ b/public/index.html @@ -15,7 +15,7 @@ <!-- Starting an immersive WebXR session requires user interaction. We start this one with a simple button. --> -<button onclick="activateXR()">Tap to Place AR Demo</button> +<button onclick="activateXR()">Start Hit to Place Demo</button> <script> async function activateXR() { // Add a canvas element and initialize a WebGL context that is compatible with WebXR. @@ -60,6 +60,8 @@ 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) { @@ -68,20 +70,18 @@ loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/reticle/re scene.add(reticle); }) -let pineCone; - // Replace the URL with new url - loader.load("https://transfer.hft-stuttgart.de/gitlab/22raya1mpg/argumented-reality/-/raw/master/public/scene.gltf", function(gltf) { - pineCone = gltf.scene; - pineCone.scale.set(0.15, 0.15, 0.15); // Adjust scale as needed - }); - - session.addEventListener("select", (event) => { - if (pineCone) { - const clone = pineCone.clone(); - clone.position.copy(reticle.position); - scene.add(clone); - } - }); +let flower; +loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/sunflower/sunflower.gltf", function(gltf) { + flower = gltf.scene; +}); + +session.addEventListener("select", (event) => { + if (flower) { + const clone = flower.clone(); + clone.position.copy(reticle.position); + scene.add(clone); + } +}); // Create a render loop that allows us to draw on the AR view. const onXRFrame = (time, frame) => { @@ -112,7 +112,9 @@ const onXRFrame = (time, frame) => { reticle.visible = true; reticle.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z) reticle.updateMatrixWorld(true); - } + } + + // Render the scene with THREE.WebGLRenderer. renderer.render(scene, camera) @@ -120,6 +122,9 @@ const onXRFrame = (time, frame) => { } session.requestAnimationFrame(onXRFrame); + + + } </script> </body> -- GitLab