-
Notifications
You must be signed in to change notification settings - Fork 334
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
251 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,251 @@ | ||
| <html> | ||
| <head> | ||
| <title>Three.js and AR.js - examples</title> | ||
| <link rel=stylesheet href="css/index.css"/> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div class="bigTitle">Three.js and AR.js Examples</div> | ||
| <hr> | ||
| 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, | ||
| <a class="toc" href="https://github.com/jeromeetienne/AR.js">AR.js</a>. Advanced <a class="toc" href="https://threejs.org/">three.js</a> examples are also included. | ||
| <br/><br/> | ||
| Viewing the AR examples will require a device with a camera and one or both of the <a class="toc" href="markers/hiro.png">Hiro</a> and <a class="toc" href="markers/kanji.png">Kanji</a> marker patterns (either printed or displayed on a second device). | ||
| <br/><br/> | ||
| Source code hosted at <a class="toc" href="https://github.com/stemkoski/AR-Examples">GitHub</a>. | ||
|
|
||
| <hr/> | ||
|
|
||
| <div class="fancy"> | ||
| <a href="hello-cube.html"> | ||
| <img src="images/demo/hello-cube.png" class="superImage" /> | ||
| <br/>Basic Cube</a> | ||
| <p class ="superText">A basic scene that superimposes a cube on a Hiro marker. | ||
| </p> | ||
| </div> | ||
|
|
||
| <div class="fancy"> | ||
| <a href="custom-patterns.html"> | ||
| <img src="images/demo/custom-patterns.png" class="superImage" /> | ||
| <br/>Many Cubes</a> | ||
| <p class ="superText">A scene that superimposes different colored cubes on a Hiro, Kanji, and letter markers. | ||
| </p> | ||
| </div> | ||
|
|
||
| <div class="fancy"> | ||
| <a href="smoothed-controls.html"> | ||
| <img src="images/demo/hello-cube.png" class="superImage" /> | ||
| <br/>Smoothed Controls</a> | ||
| <p class ="superText">The basic scene, recreated using "smoothed controls", which interpolates the marker location from frame to frame at an adjustable rate. | ||
| </p> | ||
| </div> | ||
|
|
||
| <div class="fancy"> | ||
| <a href="texture.html"> | ||
| <img src="images/demo/texture.png" class="superImage" /> | ||
| <br/>Image Texture</a> | ||
| <p class ="superText">An image is positioned to cover a Hiro marker. | ||
| </p> | ||
| </div> | ||
|
|
||
| <div class="fancy"> | ||
| <a href="globe.html"> | ||
| <img src="images/demo/globe.png" class="superImage" /> | ||
| <br/>Rotating Globe</a> | ||
| <p class ="superText">A rotating globe (illuminated by a point light) is positioned above a Hiro marker. | ||
| </p> | ||
| </div> | ||
|
|
||
| <div class="fancy"> | ||
| <a href="video.html"> | ||
| <img src="images/demo/video.png" class="superImage" /> | ||
| <br/>Video Texture</a> | ||
| <p class ="superText">A flat plane, with a video for a texture, is positioned to cover a Hiro marker. | ||
| </p> | ||
| </div> | ||
|
|
||
| <div class="fancy"> | ||
| <a href="shader.html"> | ||
| <img src="images/demo/shader.png" class="superImage" /> | ||
| <br/>Shader</a> | ||
| <p class ="superText">A flat plane moves up and down above a Hiro marker; position and tint color are controlled by vertex and fragment shaders. | ||
| </p> | ||
| </div> | ||
|
|
||
| <div class="fancy"> | ||
| <a href="model.html"> | ||
| <img src="images/demo/model.png" class="superImage" /> | ||
| <br/>Loading 3D Models</a> | ||
| <p class ="superText">A 3D model (obj and mtl files) are loaded and displayed above a Hiro marker. | ||
| </p> | ||
| </div> | ||
|
|
||
| <div class="fancy"> | ||
| <a href="hole-box.html"> | ||
| <img src="images/demo/hole-box.png" class="superImage" /> | ||
| <br/>Hole in the Floor (Box)</a> | ||
| <p class ="superText">A "hole in the floor" effect. Uses a box geometry to mask the hidden parts of the hole. | ||
| </p> | ||
| </div> | ||
|
|
||
| <div class="fancy"> | ||
| <a href="hole-plane.html"> | ||
| <img src="images/demo/hole-box.png" class="superImage" /> | ||
| <br/>Hole in the Floor (Plane)</a> | ||
| <p class ="superText">Another "hole in the floor" effect, using a plane geometry to mask the hidden parts of the hole. | ||
| </p> | ||
| </div> | ||
|
|
||
| <div class="fancy"> | ||
| <a href="hole-ring.html"> | ||
| <img src="images/demo/hole-ring.png" class="superImage" /> | ||
| <br/>Hole in the Floor (Ring)</a> | ||
| <p class ="superText">A cylindrical "hole in the floor" effect, using a ring geometry to mask the hidden parts of the hole. | ||
| </p> | ||
| </div> | ||
|
|
||
| <div class="fancy"> | ||
| <a href="basic-scene.html" target="_blank"> | ||
| <img src="images/demo/basic-scene.png" class="superImage" /> | ||
| <br/>Basic Scene</a> | ||
| <p class ="superText"> A basic scene created with only Three.js (no AR), useful for prototyping ideas before adding in AR components. </p> | ||
| </div> | ||
|
|
||
| <div class="fancy"> | ||
| <a href="water-effect.html" target="_blank"> | ||
| <img src="images/demo/water-effect.png" class="superImage" /> | ||
| <br/>Water Effect (no AR)</a> | ||
| <p class ="superText"> An animated effect (using shaders) that looks like water flowing | ||
| out from a central point and being absorbed into the floor. (No AR.)</p> | ||
| </div> | ||
|
|
||
| <div class="fancy"> | ||
| <a href="water-effect-AR.html" target="_blank"> | ||
| <img src="images/demo/water-effect-AR.png" class="superImage" /> | ||
| <br/>Water Effect (AR version)</a> | ||
| <p class ="superText"> 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. | ||
| <br/>Video preview <a class="toc" href="https://www.youtube.com/watch?v=3DfcD5APnEU">here</a>. </p> | ||
| </div> | ||
|
|
||
| <div class="fancy"> | ||
| <a href="keyboard-mesh-move.html" target="_blank"> | ||
| <img src="images/demo/mesh-movement.png" class="superImage" /> | ||
| <br/>Keyboard-Based Object Movement</a> | ||
| <p class ="superText"> Move a cube around the screen with the keyboard. Controls (<a href="images/movement-controls.png">image</a>): <br>W/A/S/D -- move Forward/Left/Backward/Right (standard), <br>Q/E -- rotate Left/Right, <br>R/F -- move Up/Down (think: <b>R</b>ise/<b>F</b>all), <br>T/G -- tilt Up/Down (think: look at <b>T</b>ower/<b>G</b>round).</p> | ||
| </div> | ||
|
|
||
| <div class="fancy"> | ||
| <a href="keyboard-camera-move.html" target="_blank"> | ||
| <img src="images/demo/camera-movement.png" class="superImage" /> | ||
| <br/>Keyboard-Based Camera Movement</a> | ||
| <p class ="superText"> Move a camera around the screen with the keyboard. <br>Uses same controls as Object Movement example. </p> | ||
| </div> | ||
|
|
||
| <div class="fancy"> | ||
| <a href="portal-half-keyboard-test.html" target="_blank"> | ||
| <img src="images/demo/portal-half-keyboard-test.png" class="superImage" /> | ||
| <br/>Portal Test</a> | ||
| <p class ="superText"> Creating a "portal to another world" effect. Camera moves using same controls as Object Movement example. Only visible from one side. | ||
| <br/>Not very robust -- see the following portal examples instead.</p> | ||
| </div> | ||
|
|
||
| <div class="fancy"> | ||
| <a href="stencil-test.html" target="_blank"> | ||
| <img src="images/demo/stencil-test.png" class="superImage" /> | ||
| <br/>Stencil Buffer Test</a> | ||
| <p class ="superText"> 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. </p> | ||
| </div> | ||
|
|
||
| <div class="fancy"> | ||
| <a href="clipping-planes.html" target="_blank"> | ||
| <img src="images/demo/clipping-planes.png" class="superImage" /> | ||
| <br/>Clipping Planes</a> | ||
| <p class ="superText"> 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. </p> | ||
| </div> | ||
|
|
||
| <div class="fancy"> | ||
| <a href="portal-view.html" target="_blank"> | ||
| <img src="images/demo/portal-view.png" class="superImage" /> | ||
| <br/>Portal View</a> | ||
| <p class ="superText"> A "portal to another world" effect. Portal visible through both sides. | ||
| <br/>Camera moves using same controls as Object Movement example; also, press 1, 2, or 3 to see the view from different cameras. | ||
| <br/>Uses stencil buffer and clipping planes for accurate rendering. | ||
| </p> | ||
| </div> | ||
|
|
||
| <div class="fancy"> | ||
| <a href="portal-view-AR.html" target="_blank"> | ||
| <img src="images/demo/portal-view-AR.png" class="superImage" /> | ||
| <br/>Portal View (AR Version)</a> | ||
| <p class ="superText"> An augmented reality version of the "portal to another world" effect. Portal renders above a Kanji marker. | ||
| <br/>Video preview <a class="toc" href="https://www.youtube.com/watch?v=-gZ3Kv9juYg">here</a>. </p> | ||
| </div> | ||
|
|
||
| <div class="fancy"> | ||
| <a href="magic-cube.html" target="_blank"> | ||
| <img src="images/demo/magic-cube.png" class="superImage" /> | ||
| <br/>Magic Cube Effect</a> | ||
| <p class ="superText"> Creates a "magic cube effect" that overlays a cube covered with six AR markers <a class="toc" href="markers/cube.png">in this pattern</a>. | ||
| <br/>Video preview <a class="toc" href="https://www.youtube.com/watch?v=ZI6oJJFgACM">here</a>. </p> | ||
| </div> | ||
|
|
||
| <div class="fancy"> | ||
| <a href="globe-multi-marker.html" target="_blank"> | ||
| <img src="images/demo/globe-multi-marker.png" class="superImage" /> | ||
| <br/>Globe with Multiple Markers</a> | ||
| <p class ="superText"> Similar to the Rotating Globe example: places a globe over a Kanji marker. If Kanji marker is blocked, uses other markers (<a class="toc" href="markers/letterA.png">letter A</a> and <a class="toc" href="markers/letterB.png">letter B</a>) to position the globe. </p> | ||
| </div> | ||
|
|
||
| <div class="fancy"> | ||
| <a href="refraction.html" target="_blank"> | ||
| <img src="images/demo/refraction.png" class="superImage" /> | ||
| <br/>Refraction</a> | ||
| <p class ="superText"> Creates a rotating torus knot above a Kanji marker. The surface of the knot refracts the scene behind it. | ||
| <br/>Video preview <a class="toc" href="https://www.youtube.com/watch?v=8-YnBk1LL-8">here</a>. | ||
| </p> | ||
| </div> | ||
|
|
||
| <div class="fancy"> | ||
| <a href="shadow.html" target="_blank"> | ||
| <img src="images/demo/shadow.png" class="superImage" /> | ||
| <br/>Shadow</a> | ||
| <p class ="superText"> Creates a rotating torus knot above a Kanji marker. The knot casts a shadow onto the plane containing the marker. </p> | ||
| </div> | ||
|
|
||
| <div class="fancy"> | ||
| <a href="shadow-balls.html" target="_blank"> | ||
| <img src="images/demo/shadow-balls.png" class="superImage" /> | ||
| <br/>Shadow Balls</a> | ||
| <p class ="superText"> Creates four colored bouncing basketballs around a Kanji marker. The balls cast shadows onto the plane containing the marker. </p> | ||
| </div> | ||
|
|
||
| <div class="fancy"> | ||
| <a href="parabolic-path.html" target="_blank"> | ||
| <img src="images/demo/parabolic-path.png" class="superImage" /> | ||
| <br/>Parabolic Path</a> | ||
| <p class ="superText"> A basketball launches from a <a class="toc" href="markers/letterA.png">Letter-A</a> marker and falls towards a <a class="toc" href="markers/letterB.png">Letter-B</a> 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. </p> | ||
| </div> | ||
|
|
||
| <!-- | ||
| <div class="fancy"> | ||
| <a href="screen-hole.html" target="_blank"> | ||
| <img src="images/demo/screen-hole.png" class="superImage" /> | ||
| <br/>Screen Hole with Multiple Markers</a> | ||
| <p class ="superText"> Simulating a "hole-in-the-wall" effect; uses <a href="markers/kanji-abcd.png">Kanji-ABCD</a> pattern. For simplicity, open <a href="screen-hole-QR.png">this image</a> and scan the QR code with your phone/tablet to be brought directly to the example (idea from Jerome Etienne). </p> | ||
| </div> | ||
| --> | ||
|
|
||
| <!-- | ||
| <div class="fancy"> | ||
| <a href="zzzz.html" target="_blank"> | ||
| <img src="images/demo/zzzz.png" class="superImage" /> | ||
| <br/>zzzz</a> | ||
| <p class ="superText"> ... </p> | ||
| </div> | ||
| --> | ||
|
|
||
| </body> | ||
| </html> |