3D Modelling/Examples/AR with Markers

AR.js
With AR.js you can place a 3D model in the camera image of your smartphone. AR.js is based on the concept of ARToolkit. The 3D is placed into the camera image by recognition of a marker. Turning and moving the marker in the camera image will turn and move the 3D model in the camera image. AR.js is also capable of geolocation based augmented reality.

Learning Task

 * Test the markers in your camera image of your smartphone displaying the selected AR.js HTML file,
 * Explain the geometry background, how a movement of markers could displace the 3D model in the camera image.
 * Create your own 3D-Model with JSON3D4Aframe or explore Javascript tools for webbased visualisation in (bio-)chemistry on http://lucianoabriata.altervista.org/jsinscience/ provided by Luciano Abriata (2018)
 * (AR VR in Primary Schools) Analyze the use of animations on marker to visualize simplified movements of planets on marker.

Explore AR.js with your Smartphone or Laptop
AR.js can be explored with laptop or smartphone, that has a camera of webcam.
 * You need a marker like the Hiro or Kanji marker to place it in front of the camera,
 * you start a web page that embeds the AR.js library to display specific 3D content elements in the camera on the marker,
 * move the 3D object in the camera image of the laptop by moving and turning the marker in front of the webcam

Marker Printout for Hiro and Kanji

 * Marker PDF file as printout for Kanji and Hiro markers

Example Hiro Marker

 * Water Molecule with AR.js and Hiro Marker. Place Hiro Marker in camera image.

Example Kanji Marker

 * Water Molecule with AR.js and Kanji Marker. Place Kanji Marker in camera image.

Create your own Markers

 * Online-Creator for your own AR.js markers - see also tutorial by Alexandra Etienne 2017.

Applications of AR.js for interactive molecular visualization in Chemitry

 * Website with chemical AR.js examples by Luciano Abriata (2018) - Use Hiro-Marker and/or Kanji-Marker in Webcam
 * ArXiv: Explanatory Preprint - Towards Commodity, Web-Based Augmented Reality Applications for Research and Education in Chemistry and Structural Biology (2018)
 * Working with two Markers (Kanji and Hiro) to visualise molecule interaction (Youtube Demo Video by Luciano Arbiata)

Animated Example
Try that for yourself:
 * Scan the QR Code with your privacy friendly QR-Code scanner (e.g. install QR-Scanner with F-Droid) or
 * just display the following link with firfox browser in your mobile device:
 * https://jeromeetienne.github.io/AR.js/three.js/examples/mobile-performance.html


 * Print out the Hiro-marker and place the marker in front of your table or
 * display this page on your tablet and place the tablet in front of you.
 * https://en.wikiversity.org/wiki/3D_Modelling#AR.js

Place the Hiro-marker in your camera image of your mobile device (smart phone).
 * AR js Mobile URL.png pattern-hiro.png

Further information can be explored at:
 * AR.js - GitHub Organisational Account based on the brilliant work AR.js by Jerome Etienne
 * Create your own 3D Markers for AR.js