How to implement ARjs with react?

[ivanlen]

Hey, I am learning react and I would like to implement ARjs in react.
Is there some kind of working example on how to implement the code with react?
I am trying to reproduce the location based example but to be honest I am kind of lost.

What I am expecting is building a component that based on some logic returns/renders the example.

export default function TestLoad() {
    const router = useRouter();
    const query = router.query;
    console.log(query.info)

    if (query.info == 'true') {
        console.log(__html.default)
        console.log('TRUE RETURN')
        return (
            // CODE HERE
        )
}

I tried using dangerouslySetInnerHTML but is not working. I guess that I have to use the npm package, but I don't know how to implement it with react.

I managed to modify the location based example with gltf files that I made with blender and everything is working great in a html file.

So the question would be how to migrate my html code to a code that can be implemented in react.

[kunal-rp]

You will have to reference the exports here:ar.js/three.js/build/ar-threex. There you can import in the context and toolkit api's required to instantiate the feed and install the ar controllers. From there you will need to use state management to pass the context s.t. you can get the marker positions.

From there you can add the three.js objects to display. Since you are using reach, you might as well use react-fiber

[ivanlen]

Thank you very much for your answer. I am still kind of noob with react. I can follow the overall idea, but I am not sure I can implement it.
If its not too much, can you provide some kind of code snippet so then I can adapt it?

[kalwalt]

You can try the https://github.com/artcom/react-three-arjs by @j-era or do you want to develop your own package?

[ivanlen]

Thanks @kalwalt . No, ideally I don't want to develop my own package. I checked out the examples and it doesn't seem to have support for location based ar.

[kalwalt]

Yes you are right for now it doesn't support location based ar.

[nickw1]

@ivanlen feel free to submit an issue to the author of react-three-arjs, or even an issue here. We may be able to develop a React package for location-based AR, time permitting.

[sdmrf]

I have successfully integrated AR.js with React.js; however, I am uncertain whether I have followed the correct approach. I would greatly appreciate it if someone could assist me in verifying the integration. I am relatively new to this and dedicated three days to unraveling the process, eventually achieving the integration. Your help would be invaluable.

[ivanlen]

any link?

[sdmrf]

I have been conducting experiments on it, and it is still a work in progress. You are welcome to explore the demo at the following link: https://sdmrf.me/ap. Additionally, you can review the source code on my GitHub repository: https://github.com/sdmrf/ap. Your feedback would be greatly appreciated, as it will aid in it's improvement.

[Rossella-Mascia-Neosyn]

@sdmrf Your link no longer works, do you have another project?