Various projects in three.js from freeCodeCamp.org
Clone the project
git clone https://github.com/cgrundman/three.jsGo to the project directory
cd ./three.jsIf using VS Code, it is recommended to install the Live Server Plugin. This creates server environment to quickly render the the page as you make updates.
The first project is an instroduction to the key components of Three.js. The main 4 necessary components are: a renderer, a camera, an object, and a light source. This project creates a simple mesh object and also showcases controls and animation.
The second project builds upon the first to render an Earth. The project uses mesh layering, as well as importing custom functions for the starfield and the glow around the planet. Special thanks to Pixel Planet Imporium for the base images used for the meshes.
The third project is the most ambitious yet. This project animates camera mothion along a path through a tube to apear to look like a wormhole. The path is imported and is what the camera travel path, viewing angle, and the tube. The blood cells are also positioned randomly along the path. The shape is a torus, a better geometry to be used later.
The fourth project showcases how to transition between scenes smoothly in three.js. The scenes are filled with Icosahedrons and transition between wireframe and mesh bodys using three different transitions from 3 different images.
The fifth project showcases an implementation of Rapier into a three.js project. This is a package to incorporate a physics ingine into three.js apps.