# Tutorial
Learn the basics of `THREE.js`, a beginner-friendly library for performing 3D rendering on the web, by creating a 3D Dice Screensaver 🎲💻!

![3D Dice Screensaver](./images/final.gif)

## Activities

### [Activity 1: Getting Started](./activity1.md)
Learn the fundamental concepts of 3D rendering like scenes, geometries, and meshes to create a basic spinning cube animation.
[![Basic Spinning Cube](./images/3D_cube_animated.gif)](./activity1.md)

### [Activity 2: Textures](./activity2.md)
Learn how to attach custom images (i.e. "textures") to 3D objects.
[![Basic Spinning Die](./images/full_die.gif)](./activity2.md)

### [Activity 3: Lighting](./activity3.md)
Learn how to add lights to a scene to create a sense of depth and direction.
[![Die with Lighting](./images/dir_light_pos_die.gif)](./activity1.md)

### [Activity 4: Basic Interactivity](./activity4.md)
Learn the basics of controlling 3D objects with user input.
[![Mouse Tracking Die](./images/mouse_move.gif)](./activity1.md)

### [Activity 5: Advanced Interactivity](./activity5.md)
Learn some more advanced techniques for controlling 3D objects with user input.
[![Drag and Drop Die](./images/Mouse_down.gif)](./activity1.md)

### [Activity 6: Normal Maps](./activity6.md)
Learn how to apply special textures called normal maps that create the appearance of contours and divots to finish off the re-creation of a classic screensaver, this time with a bouncing 3D die.
[![Screensaver](./images/final.gif)](./activity6.md)