--> LIVE DEMO
A boilerplate to integrate Augmented Reality into a React application using MindAR. This setup makes it easy to combine WebAR experiences with dynamic content powered by the headless CMS Storyblok.
With this boilerplate, you can quickly build browser-based AR scenes — load 3D models, trigger animations, or manage dynamic text and images — all without leaving your React ecosystem.
| Dependency | Version | Description |
|---|---|---|
| React | 18.2.0 | UI library for building reactive components |
| ThreeJS | 0.159 | 3D graphics library for WebGL |
| MindAR | 1.2.5 | An open-source WebAR library supporting Image, Face and World tracking |
| Vite | 7.1.15 | Fast frontend build tool and development server |
| Tailwind CSS | 4.1.11 | Utility-first CSS framework for styling |
| Shadcn/UI | 2.10.0 | Optional UI component library built on Tailwind |
| @storyblok/react | - | Optional headless CMS for dynamic content |
npm i
npm run dev
Generate your own multi-target images with the MindAR Tool and place them in the public/img directory.
Check out, how to choose a good target image for tracking.
Use this images to test the AR functionality. You can print them out or display them on another screen.
| Component | Responsibility |
|---|---|
| App.jsx | Entry point, React UI |
| ARViewer.jsx | Mounts AR scene, initializes MindAR |
| Experience.jsx | MindAR setup, anchor binding, and Three.js Scene creation |
| SceneManager | Scene lifecycle & cache |
| Scene | Base class for all scenes (fade-in/out, update hooks) |
| {CustomScene} | Custom 3D-Content attached to the target image |
├── src/
│ ├── App.jsx (Entry Point - implements ARViewer and other components)
│ ├── Experience.jsx (Merges Three.js with MindAR)
│ ├── components/
│ │ ├── /ui/ (Several shadcn ui components)
│ │ ├── ARViewer.jsx (Combines React with Three.js Canvas)
│ │ └── NavBar.jsx (UI Component)
│ ├── controllers/
│ │ └── SceneManager.js
│ ├── scenes/
│ │ ├── Scene.js
│ │ ├── ExampleScene.js
│ ├── locales/
│ │ ├── de.json
│ │ └── en.json
│ └── utils/
│ └── loader.js
│ └── Resources.jsx (main resource manager)
│ └── [... additional helper functions ...]
├── package.json
├── README.md
└── .gitignore