Using A-Frame Image Tracking. NFT image scanning is picked up in console logs, but no type of Entity will render

95 views Asked by At

I am currently working on an React.js with A-Frame project and I'm encountering an issue where my AR scene is not rendering text. I am using the <a-entity> element to create text in my scene, but the text does not appear when I run the project.

Here's a brief overview of my setup and the issues I've encountered:

  1. I am using A-Frame version 1.2.0 and AR.js version 3.3.2.
  2. I've tried using simple text as the <a-entity>, but it's not rendering in the AR scene.
  3. I've checked the position and color of the text to ensure it's not too close, too far, behind the camera, or the same color as the background.
  4. I've checked the console for errors, but there are no relevant messages that could explain this issue.
  5. I've also checked my syntax for the text component and it appears to be correct.

In addition to this, I've been experiencing some performance issues and warnings in the console related to 'requestAnimationFrame' handler and 'getImageData' readback operations. I'm not sure if these are related to the text rendering issue, but I thought it might be worth mentioning.

The screenshot attached suggest that image recognition is working overall. Just not the rendering. Here is my Ar Scene .js I'll share the other bits of the project if needed.

import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

const ARScene = () => {
    const [showAR, setShowAR] = useState(true); // Set initial state to true
    const [cameraStarted, setCameraStarted] = useState(false); // New state for tracking camera

    useEffect(() => {
        if (showAR) {
            // Check every 500ms if the video element is visible
            const intervalId = setInterval(() => {
                const video = document.querySelector('video');
                if (video && video.style.visibility !== 'hidden') {
                    setCameraStarted(true);
                    clearInterval(intervalId);
                }
            }, 500);

            // Clean up the interval on component unmount
            return () => clearInterval(intervalId);
        }
    }, [showAR]);

    return (
      <div>
        {!showAR && <button onClick={() => setShowAR(true)}>Start AR</button>}
        {showAR && (
          <div>
            {!cameraStarted && <div className="arjs-loader"><div>Loading, please wait...</div></div>}
            <a-scene
    vr-mode-ui="enabled: false;"
    renderer="logarithmicDepthBuffer: true;"
    embedded
    arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
  >
    <a-nft
      type="nft"
      url="https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/trex-image/trex"
      smooth="true"
      smoothCount="10"
      smoothTolerance=".01"
      smoothThreshold="5"
    >
      <a-entity
        gltf-model='/gltf/boombox/BoomBox.gltf'
        scale="1 1 1"
        position="0 0 0"
      >here
      </a-entity>
    </a-nft>
    <a-entity camera></a-entity>
  </a-scene>
          </div>
        )}
      <div className="footer">
      <Link to="/ar"><button className="arbutton"><img src="http://www.ristudios.com/wp-content/uploads/hou_ar.png"/></button></Link>{/* New button for ARScene */}
      <button className="mapbutton" onClick={() => {setShowAR(false); window.location.href="/";}}><img src="http://www.ristudios.com/wp-content/uploads/hou_map.png"/></button>
      <button className="gallerybutton" onClick={() => {setShowAR(false); window.location.href="/gallery";}}><img src="http://www.ristudios.com/wp-content/uploads/hou_list.png"/></button>
      </div>
      </div>
    );
};

export default ARScene;
[![enter image description here](https://i.stack.imgur.com/kL46y.png)](https://i.stack.imgur.com/kL46y.png)

I tried using a copy/paste of the sample image tracking code in the documentation. Tried multiple browsers. Hosting on aws and npm local. Tried a 3d model entity, shape, and simple text. Tried NFT and Markers.

0

There are 0 answers