Trouble Integrating reticle.glb as a Marker for Surface Detection in WebXR

Question

Hello fellow developers,

I'm currently working on a project where I'm trying to use the reticle.glb file as a marker for surface detection in WebXR. I've encountered an issue, and I'd appreciate your insights.

I suspected the problem was in the ar-hit-test attribute, specifically in the following line:

ar-hit-test="target:#my-objects;type:footprint;footprintDepth:0.2;"

I attempted to modify it by changing the target to #reticle or using src: #reticle, but these changes resulted in the marker being completely white. Additionally, clicking on it didn't display the model as expected.

p.s. I've reached a point of frustration as none of my attempts seem to work. It's causing a mental block for me, and I'm struggling to find a solution.

Any guidance on how to successfully use the reticle.glb file instead of the default footprint would be immensely appreciated. Thank you.

Here's my code:

<a-scene
      webxr="overlayElement:#dom-overlay; requiredFeatures: hit-test,local-floor;"
      reflection="directionalLight:#dirlight;"
      ar-hit-test="target:#my-objects;type:footprint;footprintDepth:0.2;"
      shadow="type: pcfsoft"
      gltf-model="dracoDecoderPath: https://cdn.jsdelivr.net/npm/[email protected]/examples/js/libs/draco/gltf/;"
      ar-cursor
      raycaster="objects: #my-objects *"
    >
      <a-assets>
        <a-asset-item
          id="bigben"
          src="https://cdn.glitch.global/d09d5073-3430-4cd9-b02d-cef56e7d6530/big_ben.glb?v=1700026564404"
        ></a-asset-item>
        <a-asset-item
          id="reticle"
          src="https://cdn.glitch.global/d09d5073-3430-4cd9-b02d-cef56e7d6530/ar_icon.png?v=1700146799205"
        ></a-asset-item>
      </a-assets>

      <a-camera position="0 0.4 1"></a-camera>

      <a-light
        hide-on-enter-ar
        intensity="0.3"
        light="type:hemisphere;color:yellow;groundColor:blue;"
        position="10 10 10"
      ></a-light>
      <a-light id="ambient-light" type="ambient" intensity="0.5"></a-light>

      <a-entity
        hide-on-enter-ar
        environment="lighting:none;shadow:true;"
      ></a-entity>
      <a-entity
        material="shader:shadow; depthWrite:false; opacity:0.9;"
        visible="false"
        geometry="primitive:shadow-plane;"
        shadow="cast:false;receive:true;"
        ar-shadow-helper="target:#my-objects;light:#dirlight;"
      ></a-entity>

      <!-- This is hidden when the user first enters ar but becomes visible when the user can place it -->
      <a-entity
        hide-on-hit-test-start
        shadow
        id="my-objects"
        scale="0.2 0.2 0.2"
        position="0.2 0 -0.4"
      >
        <a-gltf-model
          position="0 0 0"
          src="#bigben"
          scale="0.5 0.5 0.5"
        ></a-gltf-model>
      </a-entity>

      <a-entity
        gltf-model="#reticle"
        scale="0.8 0.8 0.8"
        ar-hit-test="target: #my-objects;"
        visible="false"
      ></a-entity>
    </a-scene>

Project on Glitch: link