# 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.
* Dinosaur on Marker - Explore possibilities to display animals, ancient building, microscopic objects (like cells) or large scale systems (like landscape, planetary constellations, ...) with 3D models 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 w: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).
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