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
<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.
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!)