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>

<button onclick="activateXR()">Start Hit to Place Demo</button>
<script>
async function activateXR() {
  try {
    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://transfer.hft-stuttgart.de/gitlab/32esla1mpg/webarTTP/-/blob/master/media/reticle.gltf", function(gltf) {
      reticle = gltf.scene;
      reticle.visible = false;
      scene.add(reticle);
      console.log("Reticle loaded successfully");
    }, undefined, function(error) {
      console.error("Error loading reticle:", error);
    });

    let model;
    loader.load("https://transfer.hft-stuttgart.de/gitlab/32esla1mpg/webarTTP/-/blob/master/media/sunflower.gltf", function(gltf) {
      model = gltf.scene;
      console.log("Model loaded successfully");
    }, undefined, function(error) {
      console.error("Error loading model:", error);
    });

    session.addEventListener("select", (event) => {
      if (model && reticle.visible) {
        const clone = model.clone();
        clone.position.copy(reticle.position);
        scene.add(clone);
        console.log("Model placed in scene");
      }
    });

    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);
        } else if (reticle) {
          reticle.visible = false;
        }

        renderer.render(scene, camera);
      }
    };
    session.requestAnimationFrame(onXRFrame);
  } catch (error) {
    console.error("Error in activateXR:", error);
  }
}
</script>
</body>
</html>