{"id":14981233,"url":"https://github.com/suboptimaleng/three-js-tutorials","last_synced_at":"2025-04-07T13:08:16.512Z","repository":{"id":43141309,"uuid":"465463549","full_name":"SuboptimalEng/three-js-tutorials","owner":"SuboptimalEng","description":"🥉 The code for my Three.js tutorial series on YouTube.","archived":false,"fork":false,"pushed_at":"2023-06-23T21:09:28.000Z","size":16565,"stargazers_count":236,"open_issues_count":3,"forks_count":127,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-07T13:08:10.902Z","etag":null,"topics":["glsl","javascript","three-js","threejs","threejs-example","typescript","webgl"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SuboptimalEng.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-03-02T20:44:46.000Z","updated_at":"2025-04-07T06:27:18.000Z","dependencies_parsed_at":"2024-09-24T06:31:00.074Z","dependency_job_id":"117f5473-cc3b-4a8e-8e45-8f1873cec334","html_url":"https://github.com/SuboptimalEng/three-js-tutorials","commit_stats":{"total_commits":106,"total_committers":2,"mean_commits":53.0,"dds":0.09433962264150941,"last_synced_commit":"30102364a5de7d7a37c7498bd0329388e72dfafb"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SuboptimalEng%2Fthree-js-tutorials","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SuboptimalEng%2Fthree-js-tutorials/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SuboptimalEng%2Fthree-js-tutorials/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SuboptimalEng%2Fthree-js-tutorials/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SuboptimalEng","download_url":"https://codeload.github.com/SuboptimalEng/three-js-tutorials/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247657281,"owners_count":20974345,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["glsl","javascript","three-js","threejs","threejs-example","typescript","webgl"],"created_at":"2024-09-24T14:03:11.035Z","updated_at":"2025-04-07T13:08:16.496Z","avatar_url":"https://github.com/SuboptimalEng.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🥉 Three.js Tutorials\n\nThis 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).\n\nAll 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:\n\n```\ngit clone https://github.com/SuboptimalEng/three-js-tutorials.git\ncd three-js-tutorials/04-dat-gui/\nnpm install\nnpm run dev\n```\n\n## Motivation\n\nMost 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).\n\nThis 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.\n\n## YouTube Videos\n\n- 01 - [Introduction to Three.js + 3D Programming](https://www.youtube.com/watch?v=MSZ7nqqgVKc)\n\n  \u003cimg src=\"/_thumbnails/01-intro.png\"\u003e\n\n- 02 - [React + Three.js Setup Tutorial](https://www.youtube.com/watch?v=d63N4g8p_wI)\n\n  \u003cimg src=\"/_thumbnails/02-setup-guide.png\"\u003e\n\n- 03 - [Three.js Geometry Tutorial for Beginners](https://www.youtube.com/watch?v=K_CwmMlNmQo)\n\n  \u003cimg src=\"/_thumbnails/03-geometry.png\"\u003e\n\n- 04 - [Dat.GUI Setup Guide and Tutorial](https://www.youtube.com/watch?v=JyhhHhoqK2o)\n\n  \u003cimg src=\"/_thumbnails/04-dat-gui.png\"\u003e\n\n- 05 - [Three.js Lighting Tutorial with Examples](https://www.youtube.com/watch?v=bsLosbweLNE)\n\n  \u003cimg src=\"/_thumbnails/05-lighting.png\"\u003e\n\n- 06 - [How to Add Textures to 3D Geometry](https://www.youtube.com/watch?v=vLz2Rk1r_gQ)\n\n  \u003cimg src=\"/_thumbnails/06-textures.png\"\u003e\n\n- 07 - [How to Import GLTF Models in Three.js](https://www.youtube.com/watch?v=WBe3xrV4CPM)\n\n  \u003cimg src=\"/_thumbnails/07-import-model.png\"\u003e\n\n- 08 - [How to Load Fonts in a Three.js Scene](https://www.youtube.com/watch?v=l7K9AMnesJQ)\n\n  \u003cimg src=\"/_thumbnails/08-font-loader.png\"\u003e\n\n- 09 - [How to Handle Mouse Input with Raycaster](https://www.youtube.com/watch?v=CbUhot3K-gc)\n\n  \u003cimg src=\"/_thumbnails/09-raycaster.png\"\u003e\n\n- 10 - [GLSL Vertex + Fragment Shaders Part 01](https://www.youtube.com/watch?v=EntBBM6nqQA)\n\n  \u003cimg src=\"/_thumbnails/10-shaders-part-01.png\"\u003e\n\n- 11 - [GLSL Vertex + Fragment Shaders Part 02](https://www.youtube.com/watch?v=dRo7SnOJlEM)\n\n  \u003cimg src=\"/_thumbnails/11-shaders-part-02.png\"\u003e\n\n- 12 - [Writing Shaders in VS Code + Importing GLSL Files in JS](https://www.youtube.com/watch?v=RDughHM9qoE)\n\n  \u003cimg src=\"/_thumbnails/12-shaders-in-vscode.png\"\u003e\n\n- 13 - [How to Organize Code with Three.js Groups](https://www.youtube.com/watch?v=tXBpv9cDmhg)\n\n  \u003cimg src=\"/_thumbnails/13-object-groups.png\"\u003e\n\n- 14 - [How to Animate Objects with Tween.js](https://www.youtube.com/watch?v=zXqCj8jeAi0)\n\n  \u003cimg src=\"/_thumbnails/14-tween-js.png\"\u003e\n\n- 15 - [Three.js + Cannon.js Physics Part 01](https://www.youtube.com/watch?v=Ht1JzJ6kB7g)\n\n  \u003cimg src=\"/_thumbnails/15-physics-part-01.png\"\u003e\n\n- 16 - [Three.js + Cannon.js Physics Part 02](https://www.youtube.com/watch?v=RYWMKucBDiI)\n\n  \u003cimg src=\"/_thumbnails/16-physics-part-02.png\"\u003e\n\n## Helpful Resources\n\n- [Three.js](https://threejs.org/)\n- [Discover Three.js](https://discoverthreejs.com/book/introduction/)\n- [Sean Bradley's Three.js Tutorials](https://sbcode.net/threejs/)\n- [Lee Stemokoski's Three.js Examples](https://stemkoski.github.io/Three.js/index.html)\n\n## Credits\n\n### 09-raycaster\n\n- [\"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/)\n\n### 07-import-model\n\n- [\"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/)\n\n- [\"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/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuboptimaleng%2Fthree-js-tutorials","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsuboptimaleng%2Fthree-js-tutorials","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuboptimaleng%2Fthree-js-tutorials/lists"}