Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/suboptimaleng/three-js-tutorials
🥉 The code for my Three.js tutorial series on YouTube.
https://github.com/suboptimaleng/three-js-tutorials
glsl javascript three-js threejs threejs-example typescript webgl
Last synced: about 1 month ago
JSON representation
🥉 The code for my Three.js tutorial series on YouTube.
- Host: GitHub
- URL: https://github.com/suboptimaleng/three-js-tutorials
- Owner: SuboptimalEng
- License: mit
- Created: 2022-03-02T20:44:46.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-06-23T21:09:28.000Z (over 1 year ago)
- Last Synced: 2024-10-11T22:20:43.828Z (about 1 month ago)
- Topics: glsl, javascript, three-js, threejs, threejs-example, typescript, webgl
- Language: JavaScript
- Homepage:
- Size: 15.8 MB
- Stars: 212
- Watchers: 4
- Forks: 124
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🥉 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](https://www.youtube.com/watch?v=MSZ7nqqgVKc)
- 02 - [React + Three.js Setup Tutorial](https://www.youtube.com/watch?v=d63N4g8p_wI)
- 03 - [Three.js Geometry Tutorial for Beginners](https://www.youtube.com/watch?v=K_CwmMlNmQo)
- 04 - [Dat.GUI Setup Guide and Tutorial](https://www.youtube.com/watch?v=JyhhHhoqK2o)
- 05 - [Three.js Lighting Tutorial with Examples](https://www.youtube.com/watch?v=bsLosbweLNE)
- 06 - [How to Add Textures to 3D Geometry](https://www.youtube.com/watch?v=vLz2Rk1r_gQ)
- 07 - [How to Import GLTF Models in Three.js](https://www.youtube.com/watch?v=WBe3xrV4CPM)
- 08 - [How to Load Fonts in a Three.js Scene](https://www.youtube.com/watch?v=l7K9AMnesJQ)
- 09 - [How to Handle Mouse Input with Raycaster](https://www.youtube.com/watch?v=CbUhot3K-gc)
- 10 - [GLSL Vertex + Fragment Shaders Part 01](https://www.youtube.com/watch?v=EntBBM6nqQA)
- 11 - [GLSL Vertex + Fragment Shaders Part 02](https://www.youtube.com/watch?v=dRo7SnOJlEM)
- 12 - [Writing Shaders in VS Code + Importing GLSL Files in JS](https://www.youtube.com/watch?v=RDughHM9qoE)
- 13 - [How to Organize Code with Three.js Groups](https://www.youtube.com/watch?v=tXBpv9cDmhg)
- 14 - [How to Animate Objects with Tween.js](https://www.youtube.com/watch?v=zXqCj8jeAi0)
- 15 - [Three.js + Cannon.js Physics Part 01](https://www.youtube.com/watch?v=Ht1JzJ6kB7g)
- 16 - [Three.js + Cannon.js Physics Part 02](https://www.youtube.com/watch?v=RYWMKucBDiI)
## Helpful Resources
- [Three.js](https://threejs.org/)
- [Discover Three.js](https://discoverthreejs.com/book/introduction/)
- [Sean Bradley's Three.js Tutorials](https://sbcode.net/threejs/)
- [Lee Stemokoski's Three.js Examples](https://stemkoski.github.io/Three.js/index.html)
## Credits
### 09-raycaster
- ["Shiba"](https://sketchfab.com/3d-models/shiba-faef9fe5ace445e7b2989d1c1ece361c) by [zixisun02](https://sketchfab.com/zixisun51) is licensed under [CC Attribution](http://creativecommons.org/licenses/by/4.0/)
### 07-import-model
- ["Shiba"](https://sketchfab.com/3d-models/shiba-faef9fe5ace445e7b2989d1c1ece361c) by [zixisun02](https://sketchfab.com/zixisun51) is licensed under [CC Attribution](http://creativecommons.org/licenses/by/4.0/)
- ["Hand Anatomy"](https://sketchfab.com/3d-models/hand-anatomy-ada8498be9754e9f90b2eecc1b4ef8c5) by [Caterina Zamai](https://www.artstation.com/zaccate) is licensed under [CC Attribution](https://creativecommons.org/licenses/by/4.0/)