| Server IP : 162.214.74.102 / Your IP : 216.73.216.139 Web Server : Apache System : Linux dedi-4363141.lrsys.com.br 3.10.0-1160.119.1.el7.tuxcare.els25.x86_64 #1 SMP Wed Oct 1 17:37:27 UTC 2025 x86_64 User : lrsys ( 1015) PHP Version : 5.6.40 Disable Function : exec,passthru,shell_exec,system MySQL : ON | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /home/lrsys/public_html/lrsys_apps/marisol/AR/ALT/ex/ |
Upload File : |
<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>