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 #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 <#234> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#177 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHYO3GQSM2W3N6KPKCBMDT3TJSRP3ANCNFSM4RKTP4KQ> .