Planet Viewer 3D

Finished the dedicated help panel.

What was really hard was getting the parameters with js including all the planet, solar system and etc.

I ended up having to bulk up the code on each page in order to do this, but it turned out great.

Added a button to remove info, in order to increase UX for mobile/small screen users. I also added a constellation background. Shipping soon!

In JS, the main thing I tried to do was a smooth transition.
On top of other complications, hiding and showing the box started to break its location, so I had to learn a bit more about flex boxes.

Huge CSS upgrade for the index.html, I had an original idea of a tree, however it came out like this: (a timeline/distance measuring like line)

I accidentally moved the cards above the line, which ended up looking even better, so I kind of improved it unintentionally like the time a person accidentally invented chocolate chip cookies.

Added over 7 new textures, for two whole systems. I will now enter some information for each one. My next move will be further cleaning UI.

It was a pain to source rectangle sheets for these planets, as real photographs do not exist yet for many exoplanets.

It took me some time to decide on an impression that I found reasonable and enjoyed.

Added two more systems, expect planet textures in the next devlog.
Tau Ceti and 55 Cancri were chosen because of either their iconic portrayal in movies or high likelihood of confirmed planets.

I enjoyed getting to finally just add more content to the site.

Added a new system and managed to fix the seams in the nebula.

I took in the feedback from the previous ship and hope to use it as a springboard into further polishing and developing my project.

Final log before ship: added Desktop and mobile support, alongside final fixes and reviews. I made a good readme, and plan on shipping very soon. Below is a snapshot from accessing the site on desktop

Added info and 3d rendering of each planet, cleaned up href links with document even listeners. Planning on polishing css and shipping!

In terms of the Alpha Centauri System, I have only included Proxima Centauri b as a test, but the other two planets are candidates and not confirmed yet, thus they will nto be added yet to the final project.

Got the images for all the Trappist 1 planets. I am planning on adding the Alpha Centauri system soon, once I fix the params system.

Added images in place of generic text, removed background to match the style of catalog. I am planning on using these systems as a starting point and add more later.

With some help, I was able to create the outline for the System selection. It uses basic css and manual placing to create the tree, though I might replace it.

Lots of UI cleanup and now planning to expand into other Planetary Systems. Possibly will add stars/asteroids. A key change for the catalog “menu” was to remove the card like background, making the UI much cleaner.

Added a description and information (all hand typed and researched) for Mercury and Venus. Hoping to get the rest done within a hour. (Probably will end up using AI to help me write out the stats, so I can work on bigger features)

Lots of attempts at trying to render the planet in the center of the screen. I first tried making the back button margin top larger, but it didn’t work, as the three.js ignores this. I ended up changing the camera position in order to move the planet up, without breaking the system of being able to rotate the planet with your mouse.

Created a catalog viewer that displays all planets nicely. I separated the website into two pages: catalog and 3d Viewer. Alongside that, I am planning to expand beyond our solar system and add more planets!

All planets have been added! I used a smart system that imports a png rectangle texture and wraps it around a colorless sphere.

Made a next button with slight help of w3schools, which reacts to clicks and mouse hovering.

Here is the beginning of my website, which will have the 8 planets in a 3d rotatable format.

Started up the Github page! API errors, but I will try to fix that…