AR.js
Hello, AR World!

A basic scene that places plain and textured shapes on markers (kanji, barcodes 0/1/2).

3D model

A single gltf model attached to a marker.

Multi-Textured Cube

A cube with different images on each side, attached to a marker.
Uses the aframe-multisrc component.

Animation

Animating (rotating) a globe attached to a marker, using the built-in animation component.

Text (2D and 3D)

Attaching text to the kanji and hiro markers.
3D text uses the aframe-text-geometry component.

Particle Effects

Creating a particle system effect, attached to a marker.
Uses the aframe-particle system component.

Introduction to Scripting

Rotates a globe attached to a marker, by writing an A-Frame component and modifying the underlying Three.js object.

Canvas Textures

Using an HTML canvas as the texture for a cube; creating an animation ("bouncing block") on the canvas and updating the cube texture.

Detection

A cube is attached to a kanji marker. Red, yellow, and blue squares are attached to barcode markers 0, 1, and 2.

Persistence and Following

A green square is attached to a marker. If the marker is no longer visible, the square turns red.

Line between two markers

Drawing a line between the centers of barcode markers 0 and 1.

Cylinder between two markers

Drawing spheres at the centers of barcode markers 0 and 1, and creating a cylinder between them.