The origin of ‘Road to Jupiter’

I’m a huge fan of the electronic tunes musician Wolfgun. About two years ago he released two albums called ‘The Road to Jupiter’. There was a variety of promotional content like teasers on his YouTube channel, a website with Jupiter coming closer, a comic and two physical fan packages. (I’m sure I missed some items in this list.)

All in all, I enjoyed following him on his social media channels and spent some free time thinking about his fictional space odyssey. The theme of a journey to Jupiter was cool and he mixed it with some amazing 90s tape visuals.

The 3D/VR framework A-Frame

Today I wanted to build a scene in A-Frame which is a JavaScript framework for defining 3D scenes in a HTML-like syntax. You create an <a-scene/> put an <a-sky src="photosphere.jpg"> in your HTML file, include their script and ready is your first VR-ready 360° webpage.

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>360° photo</title>
    <script src="aframe-master.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-sky src="photosphere.jpg" rotation="0 -130 0"></a-sky>
    </a-scene>
  </body>
</html>

For more control you can add cameras and lights to the scene which will prevent the default entities from showing up. A-Frame supports a bunch of entities and is able to load them as assets.

The Scene Inspector and 360° screenshots

One great thing about A-Frame is that it comes with an inspector (Ctrl + Alt + I). It lets you see, edit and export any scene. You can open up the inspector on almost any A-Frame page as it is enabled by default. Two other cool features which are enabled by default are screenshots (Ctrl + Alt + S) and 360° equirectangular screenshots (Ctrl + Alt + Shift + S). After succeeding at the struggle of pressing all of those keys at once you get a photosphere PNG which can be used in some modern image viewers or they could be the sky for your next A-Frame scene.

My scene

For today I learned to work with light sources, predefined geometry classes and applying textures. I ended up creating a Jupiter and its four biggest moons circling around it. The sizes and distances are not accurate and Jupiter is missing it’s faint rings.

The scene can be watched (and inspected 😉) here. (Beware: 3D scene with large textures!)

Attributions