diff --git a/public/index.html b/public/index.html index d24b73e5ed2303ae70d86f53680cff5e675cfc49..b8be792b0d032c54217a8149a56089f927ee5daf 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>