AR in three.js with Aruco Markers

Last updated: January 7, 2017
Three.js Version: r85

You’ll need two devices or a printer to see this example. First, print out or load this image with a different device.
Aruco marker

Then, open the example and point your camera at the aruco marker.
Aruco Marker Example with three.js

Let’s See the Code

Chrome requires websites to have an SSL certificate to display a video feed, but it will work on localhost as well.

adapter.js a polyfill to make improve cross-browser compatibility.

js-aruco library

three.js and video code to bring it all together

This article was brought to you by Marty Boggs. To find out about new articles, subscribe below.

Get Email Updates

Enter your name and email to be notified when new tutorials and 3D models are available:

How I Made a 3D Ragdoll Game with JavaScript

Tutorials

advanced, physics, featured, sound, lighting, shadows,

Like most people, I love animated violence. It feels good to break things or knock them over. Maybe it’s to assert our dominance. Maybe it’s to destroy the weak making way for the strong. I don’t know, but here’s how I programmed a bird. ...

Getting Started with three.js

Tutorials

beginner,

Using three.js is a great way to incorporate 3D graphics into your browser whether it’s on a ...

Build a Star Wars Droid in three.js

Tutorials

featured,

I just saw Rogue One, so this next example features a Star Wars like droid. BB-8 may be your only hope… ...