diff --git a/public/index.html b/public/index.html
index b8be792b0d032c54217a8149a56089f927ee5daf..86fcad9df6b5ba8a2156a8e6cf95a0989af5c2c4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,14 +8,13 @@
<!-- three.js -->
<script src="https://unpkg.com/three@0.126.0/build/three.js"></script>
-
<script src="https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js"></script>
</head>
<body>
<!-- Starting an immersive WebXR session requires user interaction.
We start this one with a simple button. -->
-<button onclick="activateXR()">Start Hit to Place Demo</button>
+<button onclick="activateXR()">Tap to Place AR Demo</button>
<script>
async function activateXR() {
// Add a canvas element and initialize a WebGL context that is compatible with WebXR.
@@ -60,24 +59,24 @@ 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);
-})
+});
-let flower;
-loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/sunflower/sunflower.gltf", function(gltf) {
- flower = gltf.scene;
+// Load the pine cone model
+let pineCone;
+loader.load("https://raw.githubusercontent.com/yasirrahman/webxr-demo/main/scene.gltf", function(gltf) {
+ pineCone = gltf.scene;
+ pineCone.scale.set(0.15, 0.15, 0.15);
});
session.addEventListener("select", (event) => {
- if (flower) {
- const clone = flower.clone();
+ if (pineCone) {
+ const clone = pineCone.clone();
clone.position.copy(reticle.position);
scene.add(clone);
}
@@ -112,9 +111,7 @@ 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)
@@ -122,9 +119,6 @@ const onXRFrame = (time, frame) => {
}
session.requestAnimationFrame(onXRFrame);
-
-
-
}
</script>
</body>