Augemented Reality

Beispiel zum Testen von AR.js. Weitere Beispiele zu three.js findet man auf der homepage.

Quelle der Beispiele sind auf GitHub zu finden

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. Marker-PDF-Printout


Image Texture

An image is positioned to cover a Hiro marker.


360 Degree Scene on a Marker

Use a 360 degree image as a aframe/AR.js sky that is positioned around the Hiro marker. The hiro marker define the perspective and view in the 360 degree scene. Keep the marker in the view of the camera.


Spinosaurus on Marker

Spinosaurus on Hiro marker. Keep the marker in the view of the camera. Sketchfab publishes 3D-Models as creative commons. One the CC-BY-4.0 models a dinosaur (Spinosaurus) is used as a 3D model on a marker. The model is called "primal carnage spinosaurus)" (URL: https://skfb.ly/pswyN) created by seth the yutyrannus. The 3D model is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/). See Spinosaurus Source on SketchFab. Keep the marker in the view of the camera.


Rotating Globe

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


Planet System - Sun, Earth, Moon

A rotating sun, moon and earth is positioned two dependent rotations above a Hiro marker. Created by Irina Shashkov - see Wikiversity learning resource


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. OBJ defines the 3D model and the MTL creates the texture and the layer.


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. A rear side of a plane is translucent. This feature is used in the


Hole in the Floor (Ring)

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


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.


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.


Marker-PDF-Printout

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 Kanji marker.


Parabolic Path

A basketball launches from a Hiro marker and falls towards a Kanji 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. Place hiro-marker and the kanji-marker in front of the webcam.


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.


GitHub-Repository - Fork