Three.js and AR.js Mini Projects

The purpose of this project is to showcase several usability ideas of Augmented Reality in various fields of life. The Javascript libraries- AR.js and THREE.js are used.

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



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.


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.


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.


Portal View (AR Version)

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


Magic Cube Effect

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


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.


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.