Update index.html

638e2a06 · Esguerra Montana · 46167b55 · 638e2a06
Commit 638e2a06 authored Jun 17, 2024 by Esguerra Montana
--- a/public/index.html
+++ b/public/index.html
-<!doctype html>
 <html>
 <head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Hit to Place Demo</title>
-
  <!-- 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>
+
 <script>
 async function activateXR() {
  // Add a canvas element and initialize a WebGL context that is compatible with WebXR.
@@ -59,6 +56,9 @@ const viewerSpace = await session.requestReferenceSpace('viewer');
 // Perform hit testing using the viewer as origin.
 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) {
@@ -67,17 +67,16 @@ loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/reticle/re
  scene.add(reticle);
 })

-let fox;
-loader.load("./fox/Fox.gltf", function(gltf) {
-  fox = gltf.scene;
-  fox.scale.set(0.05, 0.05, 0.05); // Adjust the scale as needed
+let chair;
+loader.load("./mario/scene.gltf", function(gltf) {
+  chair = gltf.scene;
+  chair.scale.set(0.5, 0.5, 0.5); // Adjust the scale as needed
 });

 session.addEventListener("select", (event) => {
-  if (fox) {
-    const clone = fox.clone();
+  if (chair) {
+    const clone = chair.clone();
    clone.position.copy(reticle.position);
-    clone.scale.set(0.05, 0.05, 0.05); // Ensure the clone is also scaled down
    scene.add(clone);
  }
 });
@@ -113,12 +112,17 @@ const onXRFrame = (time, frame) => {
      reticle.updateMatrixWorld(true);
    }

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

+
+
+
 }
 </script>
 </body>