ARVision

Create, manage, and share immersive augmented reality experiences—2D videos or 3D models—directly from your browser. No coding needed. Just upload, craft, and launch.

Comment

Inspiration

What it does

How we built it

Challenges we ran into

Accomplishments that we're proud of

What we learned

What's next for ARQraft

🎯 Augmented Reality Experience with MindAR + React + Three.js

📌 About the Project

This project is a Web-based Augmented Reality (AR) viewer that enables users to scan an image marker and experience interactive 2D or 3D content, powered by MindAR, React, and Three.js. The experience works directly in the browser—no app download required.

💡 Inspiration

The inspiration came from the idea of simplifying AR adoption for businesses and creatives. Instead of building heavy native apps, WebAR offers an instant, frictionless solution. We wanted to explore how image tracking + immersive content (2D videos or 3D models) could create engaging stories and marketing experiences.

🛠️ Tech Stack

🧱 How We Built It

  1. Marker Upload + Generation:
    Generated .mind files from target images using MindAR's CLI tools.

  2. React Integration:
    Wrapped MindAR setup inside a React component with hooks for initialization and cleanup.

  3. Dynamic Content:
    Used Firebase Firestore to fetch content (video URLs or GLTF model links) dynamically based on a URL param (/ar/:id).

  4. 2D & 3D Support:

    • If the content is a video (type: "2d"), it plays over a transparent plane using a VideoTexture.
    • If it's a 3D model (type: "3d"), it loads via GLTFLoader and is rendered in 3D space.

  5. Responsive & Safe UX:
    Included loading states, error handling, marker scan overlays, and graceful fallback UI.

🧠 What We Learned

  • Three.js Basics: Learned how to create geometry, materials, and anchor objects in an AR scene.
  • WebAR Pitfalls: Gained insights into WebAR limitations like texture size, video autoplay restrictions, and camera permissions.
  • GLTF Loader Issues: Learned to debug GLTFLoader initialization, texture 404s, and cross-origin loading problems.
  • Efficient Cleanup: Managing renderer disposal, video cleanup, and stopping animations was crucial for mobile performance.

🚧 Challenges Faced

  • GLTFLoader "not a constructor" Error:
    Solved by ensuring correct import and avoiding window.THREE conflicts.

  • Cross-Origin Resource Sharing (CORS):
    Faced issues with videos and textures not loading; resolved by using ImageKit.io with proper headers.

  • Mobile Autoplay Policy:
    Videos failed to autoplay unless muted, playsInline, and crossOrigin were set correctly.

  • MindAR Script Loading Conflicts:
    Had to dynamically inject the script only if not already loaded to prevent runtime clashes in SPA.

🚀 What’s Next

  • Session recording with screen capture
  • Marker management dashboard
  • AR analytics dashboard (views, scans, dwell time)
  • Multi-marker and spatial AR support

🌟 Thank you for checking out the project! Feel free to fork, test, or deploy your own AR campaigns using this approach.

Built With

Share this project:

Updates