As a ThreeJS Developer, I needed to convert the Astronomical Units of Habitable Exoplanets to ThreeJS 3D world units. This process required plenty of math formulas and a lot of coding that had less documentation/tutorials on the web.

Each exoplanet had its own radius and its own solar star, with its unique rotational speed that needed to be visible in the 3D world. It was challenging, but the results were worth it. I used tools like react-three Leva to get a pop-up menu, react-three Drei to get orbit/mouse controls, and all the remaining animation was hand-coded with no libraries' help (because there wasn't one). I also used Unreal Bloom post-processing to get the final finishing touches.

After doing all these things, the difficult part was optimization , because rendering 100+ planets with each different animation in a 3D world would make the Computer laggy and slow . I optimized the project by rendering exoplanets that were in focus/sight, and the remaining planets were not rendered until clicked or focused. This reduces overall memory consumption and boosts performance in a huge way.