Three.js and AR.js Examples

The goal of this collection is to provide a set of basic and instructive examples that introduce the various features in the Javascript-based Augmented Reality (AR) library, AR.js. Advanced three.js examples are also included.

Viewing the AR examples will require a device with a camera and one or both of the Hiro and Kanji marker patterns (either printed or displayed on a second device).

Source code hosted at GitHub.

Basic Cube

A basic scene that superimposes a cube on a Hiro marker.



Many Cubes

A scene that superimposes different colored cubes on a Hiro, Kanji, and letter markers.



Smoothed Controls

The basic scene, recreated using "smoothed controls", which interpolates the marker location from frame to frame at an adjustable rate.



Image Texture

An image is positioned to cover a Hiro marker.



Rotating Globe

A rotating globe (illuminated by a point light) is positioned above a Hiro marker.



Video Texture

A flat plane, with a video for a texture, is positioned to cover a Hiro marker.



Shader

A flat plane moves up and down above a Hiro marker; position and tint color are controlled by vertex and fragment shaders.



Loading 3D Models

A 3D model (obj and mtl files) are loaded and displayed above a Hiro marker.



Hole in the Floor (Box)

A "hole in the floor" effect. Uses a box geometry to mask the hidden parts of the hole.



Hole in the Floor (Plane)

Another "hole in the floor" effect, using a plane geometry to mask the hidden parts of the hole.



Hole in the Floor (Ring)

A cylindrical "hole in the floor" effect, using a ring geometry to mask the hidden parts of the hole.



Basic Scene

A basic scene created with only Three.js (no AR), useful for prototyping ideas before adding in AR components.



Water Effect (no AR)

An animated effect (using shaders) that looks like water flowing out from a central point and being absorbed into the floor. (No AR.)



Water Effect (AR version)

An animated effect (using shaders) that looks like water flowing out from a cylindrical hole (displayed above a Hiro marker), and being absorbed into the floor.
Video preview here.



Keyboard-Based Object Movement

Move a cube around the screen with the keyboard. Controls (image):
W/A/S/D -- move Forward/Left/Backward/Right (standard),
Q/E -- rotate Left/Right,
R/F -- move Up/Down (think: Rise/Fall),
T/G -- tilt Up/Down (think: look at Tower/Ground).



Keyboard-Based Camera Movement

Move a camera around the screen with the keyboard.
Uses same controls as Object Movement example.



Portal Test

Creating a "portal to another world" effect. Camera moves using same controls as Object Movement example. Only visible from one side.
Not very robust -- see the following portal examples instead.



Stencil Buffer Test

A simple example that uses layers and the stencil buffer to render part of the scene onto a plane in the scene. Camera moves using same controls as Object Movement example. Useful for understanding portal view example.



Clipping Planes

A simple example that sets up a clipping plane (aligned with a plane mesh) to limit the volume of the scene that is rendered. Useful for understanding portal view example.



Portal View

A "portal to another world" effect. Portal visible through both sides.
Camera moves using same controls as Object Movement example; also, press 1, 2, or 3 to see the view from different cameras.
Uses stencil buffer and clipping planes for accurate rendering.



Portal View (AR Version)

An augmented reality version of the "portal to another world" effect. Portal renders above a Kanji marker.
Video preview here.



Magic Cube Effect

Creates a "magic cube effect" that overlays a cube covered with six AR markers in this pattern.
Video preview here.



Globe with Multiple Markers

Similar to the Rotating Globe example: places a globe over a Kanji marker. If Kanji marker is blocked, uses other markers (letter A and letter B) to position the globe.



Refraction

Creates a rotating torus knot above a Kanji marker. The surface of the knot refracts the scene behind it.
Video preview here.



Shadow

Creates a rotating torus knot above a Kanji marker. The knot casts a shadow onto the plane containing the marker.



Shadow Balls

Creates four colored bouncing basketballs around a Kanji marker. The balls cast shadows onto the plane containing the marker.



Parabolic Path

A basketball launches from a Letter-A marker and falls towards a Letter-B marker, following a parabolic path. The ball casts shadows, and a clipping plane (see above example) is used to make the ball disappear into the marker.