proof-of-concepts/marker-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>
      ; (function () {
          var src = '//cdn.jsdelivr.net/npm/eruda';
          if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return;
          document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
          document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
        })();
    </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>Marker 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);

      // Marker
      const image = await fetch('./assets/barcode05.png').then(response => response.blob());
      const imageBitmap = await createImageBitmap(image);

      // 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: ['image-tracking'],
        trackedImages: [
          {
            image: imageBitmap,
            widthInMeters: 0.14
          }
        ]
      }));


      /*

      renderer.xr.addEventListener('sessionstart', async () => {
          const session = renderer.xr.getSession();
          const scores = await session.getTrackedImageScores();

          let trackableImages = 0;

          for (let index = 0; index < scores.length; ++index) {
            if (scores[index] == 'untrackable') {
              MarkImageUntrackable(index);
            } else {
              ++trackableImages;
            }
          }

          if (trackableImages == 0) {
            WarnUser("No trackable images");
          }
        }); */


        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);

        renderer.setAnimationLoop((timestamp, frame) => {

            if (frame) {
              const results = frame.getImageTrackingResults();

              for (const result of results) {
                // The result's index is the image's position in the trackedImages array specified at session creation
                const imageIndex = result.index;

                // Get the pose of the image relative to a reference space.
                const referenceSpace = renderer.xr.getReferenceSpace();
                const pose = frame.getPose(result.imageSpace, referenceSpace);

                const state = result.trackingState;

                if (state == "tracked") {
                  console.log("Image target has been found")
                  mesh.visible = true;
                  // update the cone mesh when the image target is found
                  mesh.matrix.fromArray(pose.transform.matrix);

                } else if (state == "emulated") {
                  mesh.visible = false;
                  console.log("Image target no longer seen")
                }
              }
            }
            renderer.render(scene, camera);

          });


    </script>
  </body>

</html>