ar-three-play

A starter project for developing an AR scene built with three.ar.js. It's set up to spawn a 3D model by the tap of your finger that you can move and rotate along the detected surface. The model is imported from a .obj file, but other 3D file formats supported by the three.js loaders should work too.

Getting Started

This section will get you up and running developing your own AR scene.

Prerequisites

Note that currently this only works on a limited set of devices on the experimental browsers WebARonARCore and WebARonARKit. Check that your device is supported before proceeding.

Installing

yarn
# or 
npm install

Build

To transpile and bundle run the following:

yarn build
# or 
npm run build

The file created in the build, main.min.js, is placed in the dist folder. Other files not touched by the bundling are just placed there for simplicity.

Run / Development

When building, the project also starts a local dev server on http://localhost:3000 with live reload. To easily get your local IP run the command (en0 for your network might be on a different ID on your machine, en1, en2 etc):

ipconfig getifaddr en0

Also, to watch for file changes and trigger a new build and live reload run:

yarn watch
# or 
npm run watch

Built With

• three.ar.js - A helper three.js library for building AR web experiences that run in WebARonARKit and WebARonARCore
• three.js - JavaScript 3D library
• hammer.js - a javascript library for multi-touch gestures
• lodash.js - a modern JavaScript utility library delivering modularity, performance, & extras
• rollup.js - ES6 module bundler
• babel.js - a compiler for writing next generation JavaScript
• eslint.js - a pluggable tool for identifying and reporting on patterns in JavaScript

License

This project is licensed under the Apache License, Version 2.0 - see the LICENSE file for details

Acknowledgments

• Martin Splitt AVGP for inspiring me to try AR/VR on the web