Coding a 3D Solar System with JavaScript + Three.js

In this game dev experiment, we build a solar system/planet simulation using Three.js in a React app. Three.js is a JavaScript library that provides an API for WebGL and makes it easy to create 3D games/animations on a browser. You can draw complex shapes, import blender objects, and even animate them all with JavaScript. Today, we go over how to set up the Three JS scene, add planets to our solar system, and rotate them around the sun.

? Code - https://github.com/SuboptimalEng/three-js-games
? Twitter - https://twitter.com/SuboptimalEng
? GitHub - https://github.com/SuboptimalEng
? Website - https://suboptimaleng.com

== [ Resources] ==
Three.js - https://threejs.org
Three.js Guide - https://sbcode.net/threejs/scene-camera-renderer
Fireship Tutorial - https://www.youtube.com/watch?v=Q7AOvWpIVHU
Traversy Media Tutorial - https://www.youtube.com/watch?v=8jP4xpga6yY
Dat GUI Tutorial - https://observablehq.com/@bumbeishvili/three-js-dat-gui-controls
Three JS Scene Guide - https://threejsfundamentals.org/threejs/lessons/threejs-scenegraph.html

== [ Timestamps ] ==
00:00 What is Three.js?
00:37 Set up Three.js Scene
02:11 Add Sun Mesh to Scene
04:38 Add Planet Meshes to Scene
06:33 Animate Planet Rotation
07:35 Solar System Demo

== [ Tags ] ==
#suboptimal #metaverse #threejs