AR-NFT not working properly when using within React

[ShimantaBhuyan]

Do you want to request a feature or report a bug? Bug

What is the current behavior? When using ar-nft in my project made with React, the elements inside the nft tag do not show up. However I can see that the image is being tracked based on console log.

If the current behavior is a bug, please provide the steps to reproduce. Here's the react component which contains the aframe scene:

import React from "react"
const ARCard = (props) => {
    console.log(props)
    return(
        <a-scene
            vr-mode-ui="enabled: false;"
            renderer="logarithmicDepthBuffer: true;"
            embedded
            arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
        >
            <a-nft
            type="nft"
            url="https://arjs-cors-proxy.herokuapp.com/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="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
                scale="5 5 5"
                position="50 150 0"
            >
            </a-entity>
            </a-nft>
            <a-entity camera></a-entity>
        </a-scene>
    )
}

export default ARCard

Here's the index.js which renders onto the DOM

import React from "react"
import ReactDOM from "react-dom"
import ARCard from "./ARCard"

import App from "./App"

ReactDOM.render(
    <ARCard />,
    document.getElementById("root")
)

Here's the web browsers console log which shows that the image is being tracked:

Please mention other relevant information such as the browser version, Operating System and Device Name Chrome Version: Version 85.0.4183.102 A-Frame Version : 0.9.2 (Date 2019-12-09, Commit #c4432e7c) three Version : ^0.111.3 WebVR Polyfill Version : ^0.10.10 AR.js Version : 3.3.0

What is the expected behavior? The scene inside the ar-nft tag should show up when the image is tracked

If this is a feature request, what is motivation or use case for changing the behavior? N.A.

[kalwalt]

Probably not a bug, try to change the position or the scale of the model. If it is tracked it should show up.

[ShimantaBhuyan]

@kalwalt, thanks for the prompt response. I have tried changing the positions and scale of the model entity but I'll give it another shot. However, is there any way I can know beforehand upto how much should those changes be made or it is just hit and trial?

[AdamVI2]

It really depends on the model. Try to use something simpler for your testing purposes - like a-box or a-text entity and see if that works.

[ShimantaBhuyan]

@AdamVI2 When I use a simple scene with primitives like box, the scene appears. But when I'm using image tracking with ar-nft in a React solution, the entities do not seem to appear. I've checked the aframe inspector, and when I unhide the nft object, nothing shows up. But if I have the same code, without using React, it works perfectly and I can see the entities in the aframe inspector as well.

[kalwalt]

@ShimantaBhuyan Have you find a solution? Maybe there is a conflict between AR.js and React css styling, that make shift the model. It would be useful, to root the issue, try with different models...

[ShimantaBhuyan]

@kalwalt, not yet, no. I guess the same too, maybe React and ar-nft are messing each other up. I tried with simple entities like box but still couldn't spawn them when using ar-nft, or find any means to check where they are spawning if they are. And like I mentioned earlier, I'm not able to view them in the aframe inspector as well.

[kalwalt]

Hi @ShimantaBhuyan how do you imported AR.js into react? We are working on the ES6 feature in this PR #116 i think it will solve most of the issues.

[ShimantaBhuyan]

Hi @ShimantaBhuyan how do you imported AR.js into react? We are working on the ES6 feature in this PR #116 i think it will solve most of the issues.

I loaded it on the index.html from the cdn. Maybe yes, loading it as a module might fix this. Looking forward to it.

[kalwalt]

@ShimantaBhuyan If you are interested the @ar-js-org/ar.js npm package will be available soon, but if you want to test follow this instructions in this issue https://github.com/AR-js-org/AR.js/issues/234

[ShimantaBhuyan]

Sure Walter, will have a look at it and get back to you.

On Tue, 20 Apr, 2021, 3:28 am Walter Perdan, @.***> wrote:

@ShimantaBhuyan https://github.com/ShimantaBhuyan If you are interested the @.**/ar.js npm package will be available soon, but if you want to test follow this instructions in this issue #234 https://github.com/AR-js-org/AR.js/issues/234

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/AR-js-org/AR.js/issues/177#issuecomment-822813693, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHYO3GQSM2W3N6KPKCBMDT3TJSRP3ANCNFSM4RKTP4KQ .