Solar Factuary

Inspiration

I had recently learned JavaScript a week ago and thought of this hackathon as a way to challenge myself to learn different libraries/frameworks related to it, as a result a week later I created this project in the hackathon using Svelte, SvelteKit, and Babylon.js. I wanted to make something 3D as it would be more unique than a regular webpage and since me and my teammate both liked space-themed things we created an educational site upon our Solar System

What it does

The website begins with a 3D view of some celestial bodies in our solar system in which you can navigate to single planet view to view some rarely-known facts about the celestial body. This serves to educate the audience about the wonders of our solar system.

How we built it

I definitely wanted to use Svelte with it, and therefore began with a replit, soon had to switch over to Svelte + SvelteKit from Svelte + Vite due to better compatibility and routing. for the 3d part i began with three.js but soon switched to babylon.js for the ease of setting up the camera and UI. The solar system view works by creating different sized spheres at set distances and rendering textures on them.

Challenges we ran into

We had to switch over to GitHub from replit quite early due to the resource issues along with familiarity with GitHub. At many times in development there were issues with texture rendering with babylon.js, the textures on the planets would render upside down and the skybox would just be a plain black. along with that when publishing to github pages many url routing issues were also encountered.