Upload New File

be17b574 · Kandia · ce0c5074 · be17b574
Commit be17b574 authored May 27, 2024 by Kandia
--- a/simplear.html
+++ b/simplear.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>Simple AR</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>
+
+<button onclick="activateXR()">Start Hit to Place Demo</button>
+<script>
+async function activateXR() {
+  const canvas = document.createElement("canvas");
+  document.body.appendChild(canvas);
+  const gl = canvas.getContext("webgl", {xrCompatible: true});
+
+  const scene = new THREE.Scene();
+  const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
+  directionalLight.position.set(10, 15, 10);
+  scene.add(directionalLight);
+
+  const renderer = new THREE.WebGLRenderer({ alpha: true, preserveDrawingBuffer: true, canvas: canvas, context: gl });
+  renderer.autoClear = false;
+
+  const camera = new THREE.PerspectiveCamera();
+  camera.matrixAutoUpdate = false;
+
+  const session = await navigator.xr.requestSession("immersive-ar", { requiredFeatures: ['hit-test'] });
+  session.updateRenderState({ baseLayer: new XRWebGLLayer(session, gl) });
+
+  const referenceSpace = await session.requestReferenceSpace('local');
+  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;
+  });
+
+  let selectedObject = null;
+  let initialHitTestSource = null;
+
+  session.addEventListener("selectstart", (event) => {
+    if (reticle.visible) {
+      const hitTestResults = event.frame.getHitTestResults(hitTestSource);
+      if (hitTestResults.length > 0) {
+        const hitPose = hitTestResults[0].getPose(referenceSpace);
+        selectedObject = flower.clone();
+        selectedObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
+        scene.add(selectedObject);
+        initialHitTestSource = hitTestSource;
+      }
+    } else {
+      const raycaster = new THREE.Raycaster();
+      const mouse = new THREE.Vector2();
+      raycaster.setFromCamera(mouse, camera);
+
+      const intersects = raycaster.intersectObjects(scene.children, true);
+      if (intersects.length > 0) {
+        selectedObject = intersects[0].object;
+        initialHitTestSource = hitTestSource;
+      }
+    }
+  });
+
+  session.addEventListener("selectend", () => {
+    selectedObject = null;
+  });
+
+  const onXRFrame = (time, frame) => {
+    session.requestAnimationFrame(onXRFrame);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer);
+
+    const pose = frame.getViewerPose(referenceSpace);
+    if (pose) {
+      const view = pose.views[0];
+      const viewport = session.renderState.baseLayer.getViewport(view);
+      renderer.setSize(viewport.width, viewport.height);
+
+      camera.matrix.fromArray(view.transform.matrix);
+      camera.projectionMatrix.fromArray(view.projectionMatrix);
+      camera.updateMatrixWorld(true);
+
+      const hitTestResults = frame.getHitTestResults(hitTestSource);
+      if (hitTestResults.length > 0 && reticle) {
+        const hitPose = hitTestResults[0].getPose(referenceSpace);
+        reticle.visible = true;
+        reticle.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
+        reticle.updateMatrixWorld(true);
+      }
+
+      if (selectedObject && initialHitTestSource) {
+        const hitTestResults = frame.getHitTestResults(initialHitTestSource);
+        if (hitTestResults.length > 0) {
+          const hitPose = hitTestResults[0].getPose(referenceSpace);
+          selectedObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
+          selectedObject.updateMatrixWorld(true);
+        }
+      }
+
+      renderer.render(scene, camera);
+    }
+  };
+  session.requestAnimationFrame(onXRFrame);
+}
+</script>
+</body>
+</html>