threejs-dice-screensaver
A tutorial teaching the basics of the 3D Web Graphics library THREE.js via the creation of a 3D Dice Screensaver
Star
Fork
Watch
threejs-dice-screensaver tutorial tutorial.md
1.5 kB · 30 lines
Markdown
at main

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

Activities #

Activity 1: Getting Started #

Learn the fundamental concepts of 3D rendering like scenes, geometries, and meshes to create a basic spinning cube animation. Basic Spinning Cube

Activity 2: Textures #

Learn how to attach custom images (i.e. "textures") to 3D objects. Basic Spinning Die

Activity 3: Lighting #

Learn how to add lights to a scene to create a sense of depth and direction. Die with Lighting

Activity 4: Basic Interactivity #

Learn the basics of controlling 3D objects with user input. Mouse Tracking Die

Activity 5: Advanced Interactivity #

Learn some more advanced techniques for controlling 3D objects with user input. Drag and Drop Die

Activity 6: Normal Maps #

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