A marker based augmented reality camera app for the web. Powered by AR.js. Fast, light-weight and works on any mobile/desktop browser with WebGL and WebRTC.
- Snap and save pictures.
- Ability to Translate, Rotate or Zoom models.
- Tested in Chrome and Safari.
- Place your 3D model in
/assets/3d-models/and link it usinga-entitytag inindex.html. Learn more. - By default the marker is preset to the hiro marker. To create a custom marker,
- Use this tool to create your custom marker.
- Export the
.pattfile and place it in/assets/custom-markers/. - Link it using
a-markertag inindex.html. Learn more. - You may follow this article to create an effective custom marker.
- Fire up the app and point it to the marker. Default hiro marker can be found here.
- Translate, rotate or zoom the model as desired and snap a pic!
| Dependency | Purpose |
|---|---|
| AR.js | Implements AR on the web. |
| A-Frame | Renders augmented content. |
| three.js | |
| ZingTouch | Gesture controls for the model. |
All AR.js web apps in general, have to be run on a server. You can use local server or deploy the static web app on the web. Might run into permission errors in http. So don't forget to always run your examples on secure connections servers or localhost. Github Pages is a great way to have free and live websites under https.
Checkout a live deployment here. Use the hiro marker to see a puppy!
Contributions are always welcome! Feel free to fork and improve the project. Scope of improvement includes:
- Ability to record video.
- Advanced gesture controls.
- Improved antialiasing of snaps.
- Suppport for portrait mode.