Update index.html

58145ce3 · Rahman · bd1026db · 58145ce3
Commit 58145ce3 authored 11 months ago by Rahman
Show whitespace changes
Inline Side-by-side

Showing

with 10 additions and 16 deletions
+10 -16
--- 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);
  }
@@ -114,17 +113,12 @@ const onXRFrame = (time, frame) => {
      reticle.updateMatrixWorld(true);
    }  

-    
-
    // Render the scene with THREE.WebGLRenderer.
    renderer.render(scene, camera)
  }
 }
 session.requestAnimationFrame(onXRFrame);

-
-
-
 }
 </script>
 </body>