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
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.
-
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
- "Shiba" by zixisun02 is licensed under CC Attribution
-
"Shiba" by zixisun02 is licensed under CC Attribution
-
"Hand Anatomy" by Caterina Zamai is licensed under CC Attribution