Build an AR React App



This content originally appeared on DEV Community and was authored by Chris

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: 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!


This content originally appeared on DEV Community and was authored by Chris