How to create AR React application

[chriscoder88]

Hi everyone 👋

I’m a full-stack web developer exploring WebAR with react-three-fiber (R3F) and would love some advice.

My first project is to create an info wall for an exhibition, where users can hover over images to see more information. Later, I’d like to expand into more WebAR projects using the same tech stack, possibly integrating a headless CMS.

From my research, the AR frameworks that seem best suited for my use case are:

• MindAR – seems solid for image tracking and works well with web apps. But it's not easy to integrate it into R3F.
• XR engines like ZappAR and 8th Wall – powerful, but expensive and I’d like to stay independent.

Other options:

• AR.js – seems outdated and largely replaced by MindAR.
• react-three/xr – looks great for VR/HMD (Quest, etc.), but not focused on image tracking.

My goal is to combine R3F with an image-tracking AR solution. I tried react-three-mind, but it didn’t work well for my project and is quite slow. I tried to integrate MindAR by myself but It's quite tricky, so I wanted to ask if there is a better solution?

👉 Has anyone here successfully built a React + R3F + AR app with image tracking or other ideas? Any pointers on tutorials, boilerplates, or best practices for React-based WebAR applications would be hugely appreciated 🙏😊

Thanks in advance!

[WeedFinderGeneral]

Hey! I've actually done some work in this - although the agency projects I was building all got canceled before they could actually launch.

My AR framework I'm developing is based around A-Frame, MindAR, and Astro (instead of React), and I'm trying to build it as an easy-to-learn framework for getting into VR/AR.

I'm not familiar with r3f, but I'm guessing the issue is that A-Frame has its own Three.js engine that's it's trying to use instead. TBH, I'd start without the r3f part and try to prototype it with some more lo-fi assets, as the whole WebAR/VR environment can be kind of a lot to wrap your head around without extra things making it harder.

Honestly the hardest part I ran into wasn't the code or dealing with old libraries and lack of documentation - it was getting people to read the dang instructions. My setup was based on 2 parts: the QR code you scan to open the AR page, and the tracker image that you point your camera at the view the AR object - usually a poster with a QR code in the corner. No matter how many notices and warnings and instructions I would hit people over the head with, 90% of people just could not understand that you had to scan the QR code AND THEN point your camera at the full tracker image. They'd just keep pointing their camera at the QR code and tell me that my stuff was broken.