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