arjs/arjs_nft.html

<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
<script>
  AFRAME.registerComponent("change-color-onclick", {
    init: function () {
      // every click, we make our model grow in size :)
      this.el.addEventListener(
        "click",
        async function (ev) {
          const color = (await this.el.getAttribute("material")).color;
          if (color === "red") {
            this.el.setAttribute("material", "color", "yellow");
          } else {
            this.el.setAttribute("material", "color", "red");
          }
        }.bind(this)
      );
    },
  });

  window.addEventListener("arjs-nft-loaded", (event) => {
    window.alert("Marker loaded!");
  });
</script>
<style>
  .arjs-loader {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .arjs-loader div {
    text-align: center;
    font-size: 1.25em;
    color: white;
  }
</style>

<body style="margin: 0px; overflow: hidden">
  <!-- minimal loader shown until image descriptors are loaded -->
  <div class="arjs-loader">
    <div>Loading, please wait...</div>
  </div>
  <a-scene
    embedded
    webxr="requiredFeatures: dom-overlay;
                  overlayElement: canvas;
                  referenceSpaceType: local"
    arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
    vr-mode-ui="enabled: false;"
    renderer="logarithmicDepthBuffer: true; precision: medium;"
  >
    <!-- we use cors proxy to avoid cross-origin problems -->

    <!--
      ⚠️⚠️⚠️
      https://arjs-cors-proxy.herokuapp.com/ is now offline, Heroku has dismissed all his free plans from November 2022.
      You need to host your own proxy and use it instead. The proxy is based on CORS Anywhere (see https://github.com/Rob--W/cors-anywhere).
      ⚠️⚠️⚠️
    -->

    <a-nft
      cursor="rayOrigin: mouse"
      raycaster="objects: [geometry]"
      type="nft"
      url=".\arjs\set\toon"
      size="0.1"
      smooth="true"
      smoothCount="10"
      smoothTolerance=".01"
      smoothThreshold="5"
    >
      <!-- Use the marker as a parent entity to define the box's size -->
      <a-entity
        change-color-onclick
        material="color: yellow"
        geometry="primitive: box; width: 1; height: 1; depth: 1"
        position="125 0 -150"
        scale="100 100 100"
      ></a-entity>
    </a-nft>
    <a-entity camera></a-entity>
  </a-scene>
</body>