proof-of-concepts/hitbox-object.html

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

    <script src="//cdn.jsdelivr.net/npm/eruda"></script>
    <script>eruda.init();</script>
    
    <script type="importmap">
      {
        "imports": {
          "three": "https://unpkg.com/three@0.151.3/build/three.module.js",
          "three/addons/": "https://unpkg.com/three@0.151.3/examples/jsm/"
        }
      }
    </script>

    <link rel="stylesheet" href="./assets/base.css">

    <title>Hitbox Object</title>
  </head>

  <body>

    <script type="module">
      import * as THREE from 'three';
      import { ARButton } from 'three/addons/webxr/ARButton.js';

      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

      // Lighting
      const light = new THREE.HemisphereLight(0xffffff, 0xbbbbff, 1);
      light.position.set(0.5, 1, 0.25);
      scene.add(light);

      // Renderer
      const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.xr.enabled = true;

      document.body.appendChild(renderer.domElement);
      document.body.appendChild(ARButton.createButton(renderer, { requiredFeatures: ['hit-test'] }));

      const controller = renderer.xr.getController(0);
      controller.addEventListener('select', onSelect);
      scene.add(controller);

      // Reticle
      const reticle = new THREE.Mesh(
        new THREE.RingGeometry(0.15, 0.2, 32).rotateX(-Math.PI / 2),
        new THREE.MeshBasicMaterial()
      );
      reticle.matrixAutoUpdate = false;
      reticle.visible = false;
      scene.add(reticle);


      const cube = new THREE.CylinderGeometry(0.1, 0.1, 0.2, 32).translate(0, 0.1, 0);
      const material = new THREE.MeshPhongMaterial({ color: 0xdd1166 });
      const mesh = new THREE.Mesh(cube, material);
      mesh.visible = false;
      scene.add(mesh);

      function onSelect() {
        if (reticle.visible) {
          mesh.visible = true;
          reticle.matrix.decompose(mesh.position, mesh.quaternion, mesh.scale);

          console.table({ pos: mesh.position, quat: mesh.quaternion, scale: mesh.scale })
        }
      }

      // Animation
      let hitTestSource = null;
      let hitTestSourceRequested = false;

      renderer.setAnimationLoop((timestamp, frame) => {
        if (frame) {
          const referenceSpace = renderer.xr.getReferenceSpace();
          const session = renderer.xr.getSession();

          if (hitTestSourceRequested === false) {
            session.requestReferenceSpace('viewer').then(function (referenceSpace) {
              session.requestHitTestSource({ space: referenceSpace }).then(function (source) {
                 hitTestSource = source;
              });
            });

            session.addEventListener('end', function () {
              hitTestSourceRequested = false;
              hitTestSource = null;
            });

            hitTestSourceRequested = true;
          }

          if (hitTestSource) {
            const hitTestResults = frame.getHitTestResults(hitTestSource);

            if (hitTestResults.length) {
              const hit = hitTestResults[0];

              reticle.visible = true;
              reticle.matrix.fromArray(hit.getPose(referenceSpace).transform.matrix);

            } else {
              reticle.visible = false;
            }
          }
        }

        renderer.render(scene, camera);
      });


    </script>
  </body>

</html>