A 3D tool to explore the night sky

The Heaven’s of Mankind website was created to share knowledge about the stars and the stories around them, from all across the world. The foundation in charge of the project already created a book on the topic, but they quickly realized the advantages of a digital experience. The biggest one was the possibility of creating a tool to visualize all the constellations and stars at once.

Here is the link to the tool: https://sternenhimmel-der-menschheit.de/explore

The majority of us are familiar with the constellations coming from the Middle Eastern, Greek, and Roman cultures (Aries, Libra, Leo…). But we do not spend much time thinking about the fact that cultures around the world all had their constellations, with their legends reflecting the way they lived (which is why we can find Kangaroos in the constellations of the Aborigines, while ethnic groups in the North will have reindeer and wolves in them). Heavens of mankind, as suggested in the name, aims to show the legends and constellations born from the night skies, all around the world. We created a 3D tool to help with that purpose.

The Earth

The tool first displays the Earth, with interactive elements on it, and the geographical location of the ethnic group that he/she can choose. After a culture is chosen, the Earth rotates to center it, and the user can confirm that he/she wants to see the constellations of this culture. The Earth then disappears and the constellations become visible.

The stars and their labels

The stars’ position and size are determined by a dataset, taken from a public source (so they reflect the position and brightness of the stars seen from the Earth) it’s possible to see their name by hovering over them (while exploring the constellations of the different cultures).

If the user selects a culture, he/she is directed to a part of the sky that has constellations, and he/she will be able to zoom in and out to see the constellations more closely. Zooming in makes some labels appear while zooming out will make them disappear again. This feature was implemented after we noticed that having all the labels simultaneously was hiding a big part of the 3D scene.

The smallest labels indicate the names of individual stars (with Greek letters: α, β…) and will be the first to disappear.

Then the medium ones showing the names of constellations (or the area that the stars belong to: Libra, Sagitta, Cygnus…) will disappear on a lower zoom level. Finally, the labels that are relevant to the current culture (in orange for the individual stars, in blue for the Milky Way, and white for the constellation’s name) will have individual settings, which will make them disappear at different zoom levels, depending on how close they are to other labels (to avoid them overlapping).

This is also a difficulty of working in 3D with different zoom levels: the labels have their center of rotation around a star, and it can be tricky to make sure they do not overlap under any rotation angle. Due to this, the scale of the labels is also adjusted based on the zoom level (bigger when the scene is more zoomed in and there is more space and smaller when there’s a risk of them overlapping).

It's also possible to turn the labels off entirely.

To see the name of a star, that does not have any label, you can simply hover it.

Highlighting a constellation

You can highlight a constellation by putting your cursor over it, or over its name in the 3D scene, or clicking on it in the search tool or the story. This will make all constellations and labels relevant to the culture disappear, except for the one currently highlighted which facilitates knowing which label corresponds to which constellation (when multiple are close to each other).

Highlighting a constellation can sometimes reveal more of it since some parts can overlap and be hidden by other constellations. Since the story sometimes mentions multiple constellations (like for the Inuit culture where The Wolf and The Reindeer are both part of the eternal hunt), it is also possible to have multiple ones highlighted at the same time.

The Milky Way

The Milky Way will fade out, the more you zoom in (to not take away the focus from the constellations) and appear when the user zooms out.

The Story

The story gives additional pieces of information on the constellations and the stories around them. The calls to action inside the text can also centre the constellations, to make it easier for the user to know which one the text is currently talking about.

The search tool

The search tool allows the user to find constellations in the 3D scene, will centre whichever one is clicked, and also rotate the camera so that it’s seen under the right angle. This feature is also available in the story so that the reader can easily find out which constellations are mentioned in the text, and it’s also possible to centre the constellations by clicking on them directly, or their name, in the 3D scene.

0
Subscribe to my newsletter

Read articles from Ludivine Constanti directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Ludivine Constanti
Ludivine Constanti

Multilingual, globe-trotting, art-directing, React-wielding developer on a never-ending quest for knowledge.