🥉 Three.js Tutorials

This repo contains the code for my Three.js tutorial series on YouTube. Each folder is self-contained and corresponds to a specific video. For example, the 04-dat-gui folder contains the code for the 4th Three.js tutorial (Dat.GUI Setup Guide and Tutorial).

All of these projects are made with React + Three.js so running them locally is super easy. Here's an example of how you can run the 04-dat-gui demo:

git clone https://github.com/SuboptimalEng/three-js-tutorials.git
cd three-js-tutorials/04-dat-gui/
npm install
npm run dev

Motivation

Most Three.js tutorials focus on teaching the fundamentals in plain HTML/CSS/JS. This is a good way to understand the core concepts, but it can be tedious to set up (even if you are an experienced full-stack developer).

This repo (and tutorial series) aims to improve the learning experience for those already familiar with the Node.js ecosystem. What can take 30-60 minutes to set up in HTML/CSS/JS is now reduced down to two NPM commands.

YouTube Videos

• 01 - Introduction to Three.js + 3D Programming

• 02 - React + Three.js Setup Tutorial

• 03 - Three.js Geometry Tutorial for Beginners

• 04 - Dat.GUI Setup Guide and Tutorial

• 05 - Three.js Lighting Tutorial with Examples

• 06 - How to Add Textures to 3D Geometry

• 07 - How to Import GLTF Models in Three.js

• 08 - How to Load Fonts in a Three.js Scene

• 09 - How to Handle Mouse Input with Raycaster

• 10 - GLSL Vertex + Fragment Shaders Part 01

• 11 - GLSL Vertex + Fragment Shaders Part 02

• 12 - Writing Shaders in VS Code + Importing GLSL Files in JS

• 13 - How to Organize Code with Three.js Groups

• 14 - How to Animate Objects with Tween.js

• 15 - Three.js + Cannon.js Physics Part 01

• 16 - Three.js + Cannon.js Physics Part 02

Helpful Resources

• Three.js
• Discover Three.js
• Sean Bradley's Three.js Tutorials
• Lee Stemokoski's Three.js Examples

Credits

09-raycaster

• "Shiba" by zixisun02 is licensed under CC Attribution

07-import-model

• "Shiba" by zixisun02 is licensed under CC Attribution

• "Hand Anatomy" by Caterina Zamai is licensed under CC Attribution