3D Modelling/Examples/AR with Markers

AR.js Example with Kanji Marker and Water Molecule as 3D object
Kanji Marker[1] for AR.js - places the 3D model on the marker in camera image.

AR.js edit

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[2]. 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 edit

Explore AR.js with your Smartphone or Laptop edit

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 edit

Example Hiro Marker edit

Example Kanji Marker edit

Create your own Markers edit

Applications of AR.js for interactive molecular visualization in Chemitry edit

Animated Example edit

3D model with AR.js displayed on Hiro marker - mobile device scanned Wikiversity page on laptop screen - Android: Browser Firefox

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:
  • 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.

Place the Hiro-marker in your camera image of your mobile device (smart phone).


Further information can be explored at:

See also edit

References edit

  1. Kanji Marker provided by ARToolkit on Github (accessed 2017/12/12) - https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Kanji%20pattern.pdf
  2. Abawi, D. F., Bienwald, J., & Dorner, R. (2004, November). Accuracy in optical tracking with fiducial markers: an accuracy function for ARToolKit. In Proceedings of the 3rd IEEE/ACM International Symposium on Mixed and Augmented Reality (pp. 260-261). IEEE Computer Society.
  3. Online Marker Creator for AR.js (2017) by Alexandra Etienne - URL: https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html (acessed 2020/07/14)
  4. Towards Commodity, Web-Based Augmented Reality Applications for Research and Education in Chemistry and Structural Biology Luciano A. Abriata (Submitted on 21 Jun 2018 (v1), last revised 24 Jul 2018 (this version, v4)) - https://arxiv.org/abs/1806.08332