Need help: box not showed when nft is recognized

[AleeeKoi]

Hello, I'm trying to implement a simple NFT recognition and show a red box on it. I followed the example but it seem not work. Logging the markerFound event I can see that the recognition works fine.

This is my piece of code:

      <div class="arjs-loader">
        <div>Loading, please wait...</div>
      </div>

      <!-- a-frame scene -->
      <a-scene
        vr-mode-ui="enabled: false;"
        renderer="logarithmicDepthBuffer: true;"
        embedded
        arjs="trackingMethod: best; sourceType: webcam; debugUIEnabled: true;"
      >
        <a-nft
          type="nft"
          url="gioconda"
          smooth="true"
          smoothCount="10"
          smoothTolerance=".01"
          smoothThreshold="5"
          emitevents="true"
          size="0.06"
        >
          <a-box color="red" width="1" height="1" position="0 1 0" rotation="0 45 45" scale="1 1 1"></a-box>
        </a-nft>
        <!-- static camera that moves according to the device movemenents -->
        <a-entity camera></a-entity>
      </a-scene>

and these are the 2 AR lib loaded:

https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js
https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js

What am I doing wrong? Thanks

[kalwalt]

hi @AleeeKoi try to enhance the scaling factor of the model and/or the width, maybe it is not displayed for this reason.

[AleeeKoi]

Hi @kalwalt ! I haven't updated this issue yet but I found the solution: Essentialy the <cavans /> element was created assuming a height = 100%. But if the <a-scene /> is inside an unstyled element (like a <div />), the canvas get a height of 0px. Setting the parent element height to something like 100vh solve it.

BTW thanks for the feedback :)