The origin of ‘Road to Jupiter’
I’m a huge fan of the electronic 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.
<!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
- Jupiter / Stars + Milky Way - Solar System Scope under CC Attribution 4.0 International
- Io - NASA/JPL/USGS under the JPL Image Use Policy
- Europa / Ganymede / Callisto - created by Björn Jónsson which are “publicly available”