{"id":13760346,"url":"https://github.com/AxiomeCG/awesome-threejs","last_synced_at":"2025-05-10T10:32:23.047Z","repository":{"id":41387727,"uuid":"509383637","full_name":"AxiomeCG/awesome-threejs","owner":"AxiomeCG","description":"3️⃣ A curated list of awesome ThreeJS resources","archived":false,"fork":false,"pushed_at":"2024-09-20T13:17:45.000Z","size":257,"stargazers_count":631,"open_issues_count":1,"forks_count":40,"subscribers_count":13,"default_branch":"main","last_synced_at":"2024-11-09T00:02:20.132Z","etag":null,"topics":["awesome","awesome-list","creative-coding","generative","resources","threejs","threejs-example","threejs-learning"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AxiomeCG.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"contributing.md","funding":null,"license":"LICENSE","code_of_conduct":"code-of-conduct.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2022-07-01T08:47:11.000Z","updated_at":"2024-11-04T15:22:04.000Z","dependencies_parsed_at":"2024-02-05T05:51:32.615Z","dependency_job_id":null,"html_url":"https://github.com/AxiomeCG/awesome-threejs","commit_stats":null,"previous_names":["axiomecg/awesome-threejs"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AxiomeCG%2Fawesome-threejs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AxiomeCG%2Fawesome-threejs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AxiomeCG%2Fawesome-threejs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AxiomeCG%2Fawesome-threejs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AxiomeCG","download_url":"https://codeload.github.com/AxiomeCG/awesome-threejs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224676797,"owners_count":17351316,"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":["awesome","awesome-list","creative-coding","generative","resources","threejs","threejs-example","threejs-learning"],"created_at":"2024-08-03T13:01:08.333Z","updated_at":"2025-05-10T10:32:23.039Z","avatar_url":"https://github.com/AxiomeCG.png","language":null,"funding_links":[],"categories":["Others","Other Lists","Web Development","Attribution"],"sub_categories":["TeX Lists","AI-Assisted CG Software"],"readme":"\u003cdiv align=\"center\"\u003e\n    \u003cbr\u003e\n    \u003cimg src=\"assets/awesome-threejs-logo.png\" alt=\"logo\" width=\"80%\"/\u003e\n    \u003ch1\u003eAwesome Threejs \u003ca href=\"https://awesome.re\", '_self');\u003e \u003cimg src=\"https://awesome.re/badge.svg\" alt=\"Awesome badge\"/\u003e\u003c/a\u003e\u003c/h1\u003e\n    \u003cp\u003e\n\t\t\u003cb\u003e3️⃣ A curated list of awesome ThreeJS resources\u003c/b\u003e\n    \u003c/p\u003e\n\u003c/div\u003e\n\n# Contents\n\n- [Core](#Core)\n- [Books](#Books)\n- [Courses](#Courses)\n- [Articles](#Articles)\n- [Videos](#Videos)\n- [Inspiration](#Inspiration)\n- [Resources](#Resources)\n- [Tools](#Tools)\n- [Libraries](#Libraries)\n- [Community](#Community)\n- [Demonstrations](#Demonstrations)\n- [Others](#Others)\n# Core\n\n- [ThreeJS official website](https://threejs.org/)\n- [ThreeJS examples](https://threejs.org/examples/#webgl_animation_keyframes)\n- [ThreeJS documentation](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene)\n\n# Books\n\n## 3D Theory\n\n- [3D Math Primer for Graphics and Game Development](https://gamemath.com/book/intro.html): A must-read book to be\n  comfortable with 3D maths. by [@ZPostFacto](https://twitter.com/ZPostFacto)\n  \u0026 [@Ian-Parberry](https://github.com/Ian-Parberry)\n- [Physically Based Rendering - From Theory to Implementation](https://pbr-book.org/): A reference in term of PBR concepts. A gold mine. by [@mmp](https://github.com/mmp), [@wjakob](https://github.com/wjakob) \u0026 [@humper](https://twitter.com/humper)\n\n## Creative Coding\n- [The Nature of Code](https://natureofcode.com/): Amazing book by a very funny author about a bunch of stuff to make experiences more natural based on the Processing language by [@shiffman](https://github.com/shiffman)\n\n## ThreeJS\n\n- [Discover three.js](https://discoverthreejs.com/)\n- [Learn Three.js - Third Edition](https://www.packtpub.com/product/learn-three-js-third-edition/9781788833288)\n\n# Courses\n\n## ThreeJS\n\n- [ThreeJS Journey](https://threejs-journey.com/): A great course accessible for the most beginner programmer who\n  wants to learn how to make ThreeJS 3D experiences from scratch. by [@bruno_simon](https://twitter.com/bruno_simon)\n\n## Shaders\n\n- [The Easiest Way to Learn GLSL](https://simondev.teachable.com/p/glsl-shaders-from-scratch)\n  by [@iced_coffee_dev](https://twitter.com/iced_coffee_dev)\n- [The Book of Shaders](https://thebookofshaders.com/): A reference on the road to master shaders. And it's free.\n  by [@patriciogv](https://twitter.com/patriciogv)\n\n# Articles\n\n## Documentation\n\n- [ThreeJS Fundamentals](https://threejs.org/manual/#en/fundamentals)\n- [Shaderific for OpenGL](https://shaderific.com/index.html): Documentation on GLSL\n- [GLSL documentation](https://docs.gl/sl4/clamp)\n\n## 3D Theory\n\n- [Explaining Homogeneous Coordinates \u0026 Projective Geometry](https://www.tomdalling.com/blog/modern-opengl/explaining-homogenous-coordinates-and-projective-geometry/):\n  A very comprehensive article on homogeneous coordinates and projective geometry (To finally understand what is the 4th\n  coordinate (w) in your vertex shaders)\n\n## Tutorials\n\n- [Surface Sampling in Three.js](https://tympanus.net/codrops/2021/08/31/surface-sampling-in-three-js/): A comprehensive\n  article about MeshSurfaceSampler\n- [How to Create a Fake 3D Image Effect with WebGL](https://tympanus.net/codrops/2019/02/20/how-to-create-a-fake-3d-image-effect-with-webgl/):\n  A good article to learn how to add a fake depth to a 2D image in ThreeJS.\n- [Tutorial on Matrices](http://www.opengl-tutorial.org/beginners-tutorials/tutorial-3-matrices/): A limpid tutorial\n  to understand shader projection, view and model matrices (visually impactful)\n\n## Water\n\n- [Real-time rendering of water caustics](https://medium.com/@martinRenou/real-time-rendering-of-water-caustics-59cda1d74aa) Clever approach to caustics rendering\n- [Realtime fluid simulation](https://shahriyarshahrabi.medium.com/gentle-introduction-to-fluid-simulation-for-programmers-and-technical-artists-7c0045c40bac) Awesome article for the ones that want to create truly realistic water\n\n## Generative Art\n\n- [generative artistry tutorials](https://generativeartistry.com/tutorials/): Really awesome evolutive tutorial to\n  acquire some knowledge on Generative Art by [@rumyra](https://github.com/rumyra)\n  \u0026 [@tholman](https://github.com/tholman)\n\n## Collision detection\n\n- [Bounding volume collision detection](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js)\n- [Physics based collision detection](https://medium.com/@bluemagnificent/collision-detection-in-javascript-3d-physics-using-ammo-js-and-three-js-31a5569291ef)\n\n# Inspiration\n\n## Common\n\n- [same.energy](https://same.energy/): Visual search engine by keyword or picture (a bit like Pinterest)\n- [Pinterest](https://www.pinterest.fr/): Good source of inspiration\n\n## Shaders\n\n- [ShaderToy](https://www.shadertoy.com/): Prepare to be blown away by this shader sharing platform.\n\n# Videos\n\n## Shaders\n\n- [ShaderShop videos](http://tobyschachman.com/Shadershop/): Some awesome videos about ShaderShop and more.\n  by [@mandy3284](https://twitter.com/mandy3284)\n\n# Resources\n\n## Miscellaneous\n\n- [Three.js Resources](https://threejsresources.com/): Contains a bunch of curated resources (tools, tutorials, libraries, and techniques...) related to Three.js\n\n## Matcaps\n\n- [Matcap repository](https://github.com/nidorx/matcaps)\n\n## 3D assets\n\n- [Poliigon](https://www.poliigon.com/): Assets for 3D artists (Textures, Models, HDRI)\n- [Poly Haven](https://polyhaven.com/): Public CC0 3D Asset Library (Textures, Models, HDRI)\n\n## Textures\n\n- [3D textures](https://3dtextures.me/): Free PBR textures with Diffuse, Normal, Displacement, Occlusion, Specularity\n  and Roughness Maps.\n- [Arroway Textures](https://www.arroway-textures.ch/): Digital textures for 3D rendering and real-time use.\n- [ambientCG](https://ambientcg.com/): - CC0 textures for Physically Based Rendering\n\n## GLSL Shaders\n### Main\n- [Signal shaping functions](https://iquilezles.org/articles/functions/): A useful set of signal shaping patterns (to\n  convert into GLSL) by [@iquilezles](https://twitter.com/iquilezles)\n- [Shaping functions](http://www.flong.com/archive/texts/code/): Awesome set of shaping functions for shaders\n  by [@golan](https://twitter.com/golan)\n- [Cheat sheet on curves](https://www.flickr.com/photos/kynd/9546075099/): A quick reminder on how to make some signal\n  patterns by [@kyndinfo](https://twitter.com/kyndinfo)\n- [GLSL Noises](https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83): Noises coded by others so you\n  can use them directly in your shaders for cool effects (included: Perlin noises)\n- [Realistic water shader](https://github.com/jbouny/ocean) There are also some links with explanation of the approach\n### Other\n- [PixelSpirit Elements Deck](https://pixelspiritdeck.com/): This is a tarot deck for learning GLSL shaders. Each PixelSpirit card has a visual element and its GLSL shader code. The cards are ordered from simplest to most complex, building a library of code functions that combine like a book of spells to form an infinite visual language. by [@patriciogv](https://twitter.com/patriciogv)\n\t- [PixelSpirit GitHub](https://github.com/patriciogonzalezvivo/PixelSpiritDeck) Library associated with the PixelSpirit Elemens Deck by [@patriciogv](https://twitter.com/patriciogv)\n\t\n# Tools\n\n## Debug/Optimization\n\n- [GLTF Report](https://gltf.report): Web app to diagnose, optimize your gltf files. Nice inspector that even support BASIS/KTX2 textures. by [@donmccurdy](https://github.com/donmccurdy)\n- [gltf-transform](https://gltf-transform.dev/): CLI to run on your GLTF file for a lot of different optimizations (welding, pruning, draco compression...). It also enables the conversion of textures into [KTX2](https://github.com/KhronosGroup/KTX-Software) for optimizing textures on the GPU by [@donmccurdy](https://github.com/donmccurdy) \n\n## Scene Creation\n\n- [Polygonjs](https://polygonjs.com): Node-based WebGL design tool, used for procedural geometry, particles, materials\n  and animation.\n\n## 3D modeling\n\n- [Blender](https://www.blender.org/): Free and powerful to create your own 3D assets. A lot of export file extensions\n  are available.\n- [Houdini](https://www.sidefx.com/products/houdini/): To create procedural 3D assets. The free licence \"Houdini\n  Apprentice\"\n  can be used to learn (no commercial usage)\n- [Spline](https://spline.design/): A promising tool for 3D modeling, collaboratively.\n\n## Materials\n\n- [Adobe Substance3D Suite](https://www.adobe.com/fr/products/substance3d/3d-augmented-reality.html)\n\n## Cube Texture\n\n- [HDRI-to-CubeMap](https://matheowis.github.io/HDRI-to-CubeMap/): A tool to convert your HDRI file into a Cube map that\n  can be load as a CubeTexture in ThreeJS. by [@matheowis](https://github.com/matheowis)\n\n## Shaders\n### Online tools\n- [GraphToy](https://graphtoy.com/): Powerful tool to wrap your head around and test shaping signals in GLSL\n  by [@iquilezles](https://twitter.com/iquilezles)\n- [ShaderShop editor](http://tobyschachman.com/Shadershop/editor/): Visually impactful editor to work on shaping\n  signals, by drag and dropping patterns. (Mindblowingly awesome) by [@mandy3284](https://twitter.com/mandy3284)\n- [NodeToy](https://app.nodetoy.co/): The shader tool for the web. NodeToy provides creators a powerful editor to create incredible new shaders and visual effects. If you are a react-three-fiber user, consider checking [react-nodetoy](https://github.com/NodeToy/react-nodetoy). All of this provided by [@Nodetoy](https://github.com/NodeToy).\n- [Shader Park](https://shaderpark.com/): A JavaScript library for creating interactive procedural 2D and 3D shaders. Helpful for raymarching shaders (the raymarcher is already built-in, SDFs and boolean operation between them already available). Works both in p5js style and GLSL. ([to contribute](https://github.com/shader-park/shader-park-core)) by [@shader-park](https://github.com/shader-park)\n  \n### Installed tools\n- [glslViewer](https://github.com/patriciogonzalezvivo/glslViewer): Console-based GLSL Sandbox for 2D/3D shaders by [@patriciogv](https://twitter.com/patriciogv). Battle-tested by its creator, it enables to build a creative pipeline agnostic to the target platform and to iterate very fast and with less frictions for making a draft of your shaders ideas. A must-have in your toolkit.\n\n## Sandbox\n\n- [codesandbox](https://codesandbox.io/): Sandbox to experiment and share with people. ThreeJS template can be easily\n  found.\n- [codepen](https://codepen.io/): Found it hard to configure for ThreeJS x Typescript, but a good sandbox to try out new\n  things.\n- [threejs-editor](https://threejs.org/editor/): A nice tool to, for example, try out your Blender exports and how they\n  will react in ThreeJS.\n\n## Hosting\n\n- [vercel](https://vercel.com/): Easy tool to host your projects, and free for a personal/hobbyist type of projects.\n\n# Libraries\n## GLSL/HLSL Shaders\n- [lygia](https://github.com/patriciogonzalezvivo/lygia):  a granular and multi-language shader library designed for performance and flexibility by [@patriciogv](https://twitter.com/patriciogv). A cross platform library that will help you iterate on your shaders very easily. Going deep in the code of a specific functionality can also help you learn GLSL/HLSL.\n\n## Animation\n- [gsap](https://greensock.com/gsap/): A mastodon for animations in CSS and for three.js too, backed up by awesome plugins like ScrollTrigger, Flip,... and mostly framework agnostic.\n\n\n## Related Frameworks\n\n### React\n\n- [react-three-fiber](https://github.com/pmndrs/react-three-fiber): A declarative way of handling your ThreeJS stuff for\n  React by [@pmndrs](https://github.com/pmndrs)\n- [drei](https://github.com/pmndrs/drei): Useful helpers for react-three-fiber by [@pmndrs](https://github.com/pmndrs)\n- [react-postprocessing](https://github.com/pmndrs/react-postprocessing): a postprocessing wrapper for @react-three/fiber by [@pmndrs](https://github.com/pmndrs)\n- [react-spring](https://www.react-spring.dev/): An awesome library about physically accurate animations. Works smoothly also for react-three-fiber using the package [`@react-spring/three`](https://www.react-spring.dev/docs/guides/react-three-fiber)\n- [framer-motion](https://www.framer.com/motion/): A nice animation library for react, and can be used with react-three-fiber too through the [`framer-motion-3d`](https://www.framer.com/motion/three-introduction/) package usage. Very nice for binding animation on entering and leaving the viewport element.\n\n### Angular\n\n- [angular-three](https://github.com/nartc/angular-three): Declarative ThreeJS inspired by r3f for the Angular ecosystem\n  by [@nartc](https://github.com/nartc)\n\n### Vue\n\n- [trois](https://github.com/troisjs/trois): The equivalent of r3f for VueJS by [@troisjs](https://github.com/troisjs)\n- [TresJs](https://github.com/tresjs/tres): Declarative ThreeJS using Vue Components by [@tresjs_dev](https://github.com/Tresjs)\n- [Cientos](https://github.com/Tresjs/cientos): Collection of useful helpers and fully functional, ready-made abstractions for TresJs [@tresjs_dev](https://github.com/Tresjs)\n- [tres-post-processing](https://github.com/Tresjs/post-processing): Post-processing library for TresJs [@tresjs_dev](https://github.com/Tresjs)\n\n### Svelte\n\n- [threlte](https://github.com/grischaerbe/threlte): A three.js component library for Svelte.\n- [svelte-cubed](https://github.com/Rich-Harris/svelte-cubed): Declarative ThreeJS for Svelte\n  by [@Rich-Harris](https://github.com/Rich-Harris)\n\n## Physics\n\n- [cannon-es](https://github.com/pmndrs/cannon-es) by [@pmndrs](https://github.com/pmndrs/)\n- [Ammo.js](https://github.com/kripken/ammo.js/)\n- [Oimo.js](https://lo-th.github.io/Oimo.js/#basic)\n- [Rapier](https://github.com/dimforge/rapier) by [@dimforge](https://github.com/dimforge/) \n\n## Spatial querying \u0026 Raycasting\n\n- [three-mesh-bvh](https://github.com/gkjohnson/three-mesh-bvh) by [@gkjohnson](https://github.com/gkjohnson/): Highly effective way to check for collisions and to accelerate raycasting by the usage of bounding volume hierarchy. (Really a must have in your toolkit)\n\n## Constructive Solid Geometry\n\n- [three-bvh-csg](https://github.com/gkjohnson/three-bvh-csg) by [@gkjohnson](https://github.com/gkjohnson/): A flexible, memory compact, fast and dynamic CSG implementation on top of three-mesh-bvh. (Amazing tool to perform some Boolean operations between meshes like intersection, difference, ...)\n\n## Pathfinding\n\n- [Pathfinging.js](https://github.com/qiao/PathFinding.js) Useful library with tons of settings\n- [Three-pathfinging](https://github.com/donmccurdy/three-pathfinding) Three.js plugin for navigation\n- [Kompute](https://github.com/oguzeroglu/Kompute) Easy to use steering library\n\n## Characters\n\n- [ossos](https://github.com/sketchpunklabs/ossos) A complete character skinning \u0026 animation library for the web\n- [mannequin.js](https://boytchev.github.io/mannequin.js/) Library for procedural character generation. Armature included\n\n# Demonstrations\n\n## Water\n\n- [fft-ocean](https://github.com/jbouny/fft-ocean) Fast Fourier Transform ocean rendering for Three.js\n- [skunami.js](https://github.com/skeelogy/skunami.js/) Marvellous project with realistic water interaction\n- [Shallow water](https://vuoriov4.github.io/webgl-water-demo/) Demo project that shows water ripple effect\n\n## Collision detection\n\n- [Axis-Aligned Bounding Boxes](https://github.com/mozdevs/gamedev-js-3d-aabb) AABB based collision detection\n- [Raycast based Collision detection](http://stemkoski.github.io/Three.js/Collision-Detection.html)\n\n# Community\n\n## Core\n\n- [Stackoverflow ThreeJS](https://stackoverflow.com/questions/tagged/three.js): Forum where you can ask your questions (\n  be sure to search well before)\n- [Official ThreeJS Discord](https://discord.com/invite/56GBJwAnUS)\n- [Official ThreeJS Forum](https://discourse.threejs.org/)\n- [Official Slack](https://join.slack.com/t/threejs/shared_invite/zt-rnuegz5e-FQpc6YboDVW~5idlp7GfDw)\n- [Official Twitter](https://twitter.com/threejs)\n- [Official Reddit](https://www.reddit.com/r/threejs/)\n# Contribute\n\nContributions welcome! Read the [contribution guidelines](contributing.md) first.\n\nOr you can reach me on Twitter:\n\n[![Twitter](https://img.shields.io/badge/Twitter-%231DA1F2.svg?style=for-the-badge\u0026logo=Twitter\u0026logoColor=white)](https://twitter.com/Axiome_CG)\n\n# Related Lists\n\n- [awesome-glsl](https://github.com/vanrez-nez/awesome-glsl) - A curated list of awesome GLSL resources.\n- [awesome-webgl](https://github.com/sjfricke/awesome-webgl) - A curated list of awesome WebGL libraries, resources and\n  much more.\n- [awesome-webgpu](https://github.com/mikbry/awesome-webgpu) - A curated list of awesome WebGPU resources.\n- [awesome-opengl](https://github.com/eug/awesome-opengl) - A curated list of awesome OpenGL libraries, debuggers and\n  resources.\n- [awesome-creative-coding](https://github.com/terkelg/awesome-creative-coding) - A carefully curated list of awesome\n  creative coding resources primarily for beginners/intermediates.\n- [awesome-computer-vision](https://github.com/jbhuang0604/awesome-computer-vision) - A curated list of awesome computer\n  vision resources.\n- [awesome-vulkan](https://github.com/vinjn/awesome-vulkan) - A curated list of awesome Vulkan projects and ecosystem.\n- [gamedev](https://github.com/ellisonleao/magictools) - A awesome list about game development.\n- [graphics-resources](https://github.com/mattdesl/graphics-resources) - A list of graphic programming resources.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAxiomeCG%2Fawesome-threejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAxiomeCG%2Fawesome-threejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAxiomeCG%2Fawesome-threejs/lists"}