DEV Community

Aravindhan
Aravindhan

Posted on

From Hackathon Pain Point to NPM Package: Introducing react-markerless-ar – A Markerless 3D AR Viewer in React

#react #mixedreality #npm #threejs

Image description
Hey Devs! 👋
I’m excited to share something I built out of pure necessity during a hackathon — and it’s now a fully published NPM package! 📦

🧩 The Problem
During my second year in college, my team participated in Make-a-Thon 5.0, where we wanted to use AR to display 3D objects. Unfortunately, we had to rely on third-party platforms because integrating AR directly into our app felt overly complex at the time.

Fast forward to RotaTechX, another hackathon organized by the Rotaract Clubs of SVCE. Faced with the same challenge, I decided not to rely on external tools again — and that’s how this component was born.

🚀 Introducing @cow-the-great/react-markerless-ar
A fully customizable React component library that lets you render .glb/.gltf 3D models in a markerless AR-like experience directly in the browser using your webcam feed. Built with React Three Fiber and Three.js, it works seamlessly with minimal setup.

📦 NPM:
@cow-the-great/react-markerless-ar

💻 GitHub Repo:
github.com/CowTheGreat/3d-Modal-Marker-Less-Ar-Viewer

✨ Features

  • 📷 Markerless AR simulation (camera feed background)
  • 🧱 Components: ModelViewer (static), AnimationViewer (animated)
  • ⚙️ Fully customizable via props (camera, lighting, controls, model, background)
  • 🛠️ No need for external SDKs or markers
  • 🌐 Works entirely in-browser 
import {
  ModelViewer,
  AnimationViewer,
} from "@cow-the-great/react-markerless-ar";

<AnimationViewer
  modelPath="model.glb"
  width="100vw"
  height="100vh"
  cameraProps={{ position: [0, 2, 5], fov: 60 }}
  lightingProps={{ ambientLightIntensity: 0.8, directionalLightPosition: [5, 5, 5] }}
  modelProps={{ scale: 2, position: [0, 0, 0] }}
  backgroundProps={{ enableCamera: true, planeSize: 30 }}
/>
Enter fullscreen mode Exit fullscreen mode

👥 Looking for Feedback
This is just v1.0.0 and I’m hoping to improve it with community feedback!
Try it out, break it, tweak it, and if you’re interested in contributing — I’d love that! 😊

Feel free to open issues or submit PRs if you have ideas or fixes.

Thanks for reading!
Let’s keep building cool things 💡

Top comments (0)