🥉 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

adpaar / three-js-tutorials Goto Github PK