three-js-教程源代码.zip

# 🥉 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) <img src="/_thumbnails/01-intro.png"> - 02 - [React + Three.js Setup Tutorial](https://www.youtube.com/watch?v=d63N4g8p_wI) <img src="/_thumbnails/02-setup-guide.png"> - 03 - [Three.js Geometry Tutorial for Beginners](https://www.youtube.com/watch?v=K_CwmMlNmQo) <img src="/_thumbnails/03-geometry.png"> - 04 - [Dat.GUI Setup Guide and Tutorial](https://www.youtube.com/watch?v=JyhhHhoqK2o) <img src="/_thumbnails/04-dat-gui.png"> - 05 - [Three.js Lighting Tutorial with Examples](https://www.youtube.com/watch?v=bsLosbweLNE) <img src="/_thumbnails/05-lighting.png"> - 06 - [How to Add Textures to 3D Geometry](https://www.youtube.com/watch?v=vLz2Rk1r_gQ) <img src="/_thumbnails/06-textures.png"> - 07 - [How to Import GLTF Models in Three.js](https://www.youtube.com/watch?v=WBe3xrV4CPM) <img src="/_thumbnails/07-import-model.png"> - 08 - [How to Load Fonts in a Three.js Scene](https://www.youtube.com/watch?v=l7K9AMnesJQ) <img src="/_thumbnails/08-font-loader.png"> - 09 - [How to Handle Mouse Input with Raycaster](https://www.youtube.com/watch?v=CbUhot3K-gc) <img src="/_thumbnails/09-raycaster.png"> - 10 - [GLSL Vertex + Fragment Shaders Part 01](https://www.youtube.com/watch?v=EntBBM6nqQA) <img src="/_thumbnails/10-shaders-part-01.png"> - 11 - [GLSL Vertex + Fragment Shaders Part 02](https://www.youtube.com/watch?v=dRo7SnOJlEM) <img src="/_thumbnails/11-shaders-part-02.png"> - 12 - [Writing Shaders in VS Code + Importing GLSL Files in JS](https://www.youtube.com/watch?v=RDughHM9qoE) <img src="/_thumbnails/12-shaders-in-vscode.png"> - 13 - [How to Organize Code with Three.js Groups](https://www.youtube.com/watch?v=tXBpv9cDmhg) <img src="/_thumbnails/13-object-groups.png"> - 14 - [How to Animate Objects with Tween.js](https://www.youtube.com/watch?v=zXqCj8jeAi0) <img src="/_thumbnails/14-tween-js.png"> - 15 - [Three.js + Cannon.js Physics Part 01](https://www.youtube.com/watch?v=Ht1JzJ6kB7g) <img src="/_thumbnails/15-physics-part-01.png"> - 16 - [Three.js + Cannon.js Physics Part 02](https://www.youtube.com/watch?v=RYWMKucBDiI) <img src="/_thumbnails/16-physics-part-02.png"> ## 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/)