After a first version developed in processing and a second version adopted to Unity3D, programmed in C#, I finally found some time to have a look at Three.js.1 While the two former can only be shown via screencast videos, the latter allows anyone to explore the image galaxy2 live in the browser.

screenshot

Go to the interactive version here: mathiasbernhard.ch/gugelmann/

Or go to the version for Google Cardboard here: mathiasbernhard.ch/gugelmann/cardboard.html

Depending on the internet connection, it might take some time to load all the 2336 images. Until then, they are just displayed as a black quad. The first sorting of the items is according to similarity in color distribution. There are two more arrangements available by clicking on the corresponding button in the top left corner. As the mouse hovers over the items, an info box with some metadata is displayed on the left. The user can rotate, zoom and pan by dragging the left mouse button and holding A, S or D-key respectively.

It admittedly seems a bit silly in retrospect to reproduce the same project in three different environments using three different programming languages. For future projects, three.js will be the tool of choice from the beginning.

This project has been presented by Jerome Etienne on his blog:
http://learningthreejs.com/blog/2015/06/05/learningthree-dot-js-news-stay-tuned-with-creative-3d-demos/


Compilation by learningthree.js

  1. Three.js is a lightweight javascript library, allowing to create animated 3D visualisations in the browser using WebGL.
  2. Images from the Gugelmann Collection “Schweizer Kleinmeister”, provided by the Schweizerische Nationalbibliothek