Since beginning my journey into the Front End, I have always been interested in how to create 3-dimensional renderings in the browser.

Today we’re going to dive into an introduction on how to use WebGL with ThreeJS, and together build a fun 3D, not-to-scale rendering of our solar system!

I say not-to-scale because, well, space is vast.

It will take the SpaceX Starship 6 months to travel to Mars in 2024, a distance which takes light a full 3 minutes.

If we made our little browser-rendering to scale, our planets would be infinitesimally tiny in a black void… just like in real life! 🤣

No, instead we shall aim for the visually pleasing over real-world accuracy.

Here is a gif of our finished project in the browser:

And here is the final project repository.

Let’s have some fun.🚀

---

WebGL and ThreeJS

Compared to modern web tech, WebGL (based on OpenGL) is relatively old.

Created in 2006 and adopted by Mozilla and Opera a year later, WebGL has been steadily iterated upon over the years and is now a standard tech included in modern browsers.

ThreeJS, the primary tech we’ll be using today, is a library that allows us to create and display animated 3D computer graphics in the browser.

Built on WebGL, it allows us to create shapes, load textures, customize lighting, manipulate and animate perspectives, customize the orbit controls of the camera… among many other possibilities.

#threejs #webgl #javascript #web-development #programming