Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/AxiomeCG/awesome-threejs

3️⃣ A curated list of awesome ThreeJS resources
https://github.com/AxiomeCG/awesome-threejs

List: awesome-threejs

awesome awesome-list creative-coding generative resources threejs threejs-example threejs-learning

Last synced: about 1 month ago
JSON representation

3️⃣ A curated list of awesome ThreeJS resources

Awesome Lists containing this project

README 

        


    


    logo

    
Awesome Threejs  Awesome badge



    


		3️⃣ A curated list of awesome ThreeJS resources

    





# Contents



- [Core](#Core)

- [Books](#Books)

- [Courses](#Courses)

- [Articles](#Articles)

- [Videos](#Videos)

- [Inspiration](#Inspiration)

- [Resources](#Resources)

- [Tools](#Tools)

- [Libraries](#Libraries)

- [Community](#Community)

- [Demonstrations](#Demonstrations)

- [Others](#Others)

# Core



- [ThreeJS official website](https://threejs.org/)

- [ThreeJS examples](https://threejs.org/examples/#webgl_animation_keyframes)

- [ThreeJS documentation](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene)



# Books



## 3D Theory



- [3D Math Primer for Graphics and Game Development](https://gamemath.com/book/intro.html): A must-read book to be

  comfortable with 3D maths. by [@ZPostFacto](https://twitter.com/ZPostFacto)

  & [@Ian-Parberry](https://github.com/Ian-Parberry)

- [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) & [@humper](https://twitter.com/humper)



## Creative Coding

- [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)



## ThreeJS



- [Discover three.js](https://discoverthreejs.com/)

- [Learn Three.js - Third Edition](https://www.packtpub.com/product/learn-three-js-third-edition/9781788833288)



# Courses



## ThreeJS



- [ThreeJS Journey](https://threejs-journey.com/): A great course accessible for the most beginner programmer who

  wants to learn how to make ThreeJS 3D experiences from scratch. by [@bruno_simon](https://twitter.com/bruno_simon)



## Shaders



- [The Easiest Way to Learn GLSL](https://simondev.teachable.com/p/glsl-shaders-from-scratch)

  by [@iced_coffee_dev](https://twitter.com/iced_coffee_dev)

- [The Book of Shaders](https://thebookofshaders.com/): A reference on the road to master shaders. And it's free.

  by [@patriciogv](https://twitter.com/patriciogv)



# Articles



## Documentation



- [ThreeJS Fundamentals](https://threejs.org/manual/#en/fundamentals)

- [Shaderific for OpenGL](https://shaderific.com/index.html): Documentation on GLSL

- [GLSL documentation](https://docs.gl/sl4/clamp)



## 3D Theory



- [Explaining Homogeneous Coordinates & Projective Geometry](https://www.tomdalling.com/blog/modern-opengl/explaining-homogenous-coordinates-and-projective-geometry/):

  A very comprehensive article on homogeneous coordinates and projective geometry (To finally understand what is the 4th

  coordinate (w) in your vertex shaders)



## Tutorials



- [Surface Sampling in Three.js](https://tympanus.net/codrops/2021/08/31/surface-sampling-in-three-js/): A comprehensive

  article about MeshSurfaceSampler

- [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/):

  A good article to learn how to add a fake depth to a 2D image in ThreeJS.

- [Tutorial on Matrices](http://www.opengl-tutorial.org/beginners-tutorials/tutorial-3-matrices/): A limpid tutorial

  to understand shader projection, view and model matrices (visually impactful)



## Water



- [Real-time rendering of water caustics](https://medium.com/@martinRenou/real-time-rendering-of-water-caustics-59cda1d74aa) Clever approach to caustics rendering

- [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



## Generative Art



- [generative artistry tutorials](https://generativeartistry.com/tutorials/): Really awesome evolutive tutorial to

  acquire some knowledge on Generative Art by [@rumyra](https://github.com/rumyra)

  & [@tholman](https://github.com/tholman)



## Collision detection



- [Bounding volume collision detection](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js)

- [Physics based collision detection](https://medium.com/@bluemagnificent/collision-detection-in-javascript-3d-physics-using-ammo-js-and-three-js-31a5569291ef)



# Inspiration



## Common



- [same.energy](https://same.energy/): Visual search engine by keyword or picture (a bit like Pinterest)

- [Pinterest](https://www.pinterest.fr/): Good source of inspiration



## Shaders



- [ShaderToy](https://www.shadertoy.com/): Prepare to be blown away by this shader sharing platform.



# Videos



## Shaders



- [ShaderShop videos](http://tobyschachman.com/Shadershop/): Some awesome videos about ShaderShop and more.

  by [@mandy3284](https://twitter.com/mandy3284)



# Resources



## Matcaps



- [Matcap repository](https://github.com/nidorx/matcaps)



## 3D assets



- [Poliigon](https://www.poliigon.com/): Assets for 3D artists (Textures, Models, HDRI)

- [Poly Haven](https://polyhaven.com/): Public CC0 3D Asset Library (Textures, Models, HDRI)



## Textures



- [3D textures](https://3dtextures.me/): Free PBR textures with Diffuse, Normal, Displacement, Occlusion, Specularity

  and Roughness Maps.

- [Arroway Textures](https://www.arroway-textures.ch/): Digital textures for 3D rendering and real-time use.

- [ambientCG](https://ambientcg.com/): - CC0 textures for Physically Based Rendering



## GLSL Shaders

### Main

- [Signal shaping functions](https://iquilezles.org/articles/functions/): A useful set of signal shaping patterns (to

  convert into GLSL) by [@iquilezles](https://twitter.com/iquilezles)

- [Shaping functions](http://www.flong.com/archive/texts/code/): Awesome set of shaping functions for shaders

  by [@golan](https://twitter.com/golan)

- [Cheat sheet on curves](https://www.flickr.com/photos/kynd/9546075099/): A quick reminder on how to make some signal

  patterns by [@kyndinfo](https://twitter.com/kyndinfo)

- [GLSL Noises](https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83): Noises coded by others so you

  can use them directly in your shaders for cool effects (included: Perlin noises)

- [Realistic water shader](https://github.com/jbouny/ocean) There are also some links with explanation of the approach

### Other

- [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)

	- [PixelSpirit GitHub](https://github.com/patriciogonzalezvivo/PixelSpiritDeck) Library associated with the PixelSpirit Elemens Deck by [@patriciogv](https://twitter.com/patriciogv)

	

# Tools



## Debug/Optimization



- [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)

- [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) 



## Scene Creation



- [Polygonjs](https://polygonjs.com): Node-based WebGL design tool, used for procedural geometry, particles, materials

  and animation.



## 3D modeling



- [Blender](https://www.blender.org/): Free and powerful to create your own 3D assets. A lot of export file extensions

  are available.

- [Houdini](https://www.sidefx.com/products/houdini/): To create procedural 3D assets. The free licence "Houdini

  Apprentice"

  can be used to learn (no commercial usage)

- [Spline](https://spline.design/): A promising tool for 3D modeling, collaboratively.



## Materials



- [Adobe Substance3D Suite](https://www.adobe.com/fr/products/substance3d/3d-augmented-reality.html)



## Cube Texture



- [HDRI-to-CubeMap](https://matheowis.github.io/HDRI-to-CubeMap/): A tool to convert your HDRI file into a Cube map that

  can be load as a CubeTexture in ThreeJS. by [@matheowis](https://github.com/matheowis)



## Shaders

### Online tools

- [GraphToy](https://graphtoy.com/): Powerful tool to wrap your head around and test shaping signals in GLSL

  by [@iquilezles](https://twitter.com/iquilezles)

- [ShaderShop editor](http://tobyschachman.com/Shadershop/editor/): Visually impactful editor to work on shaping

  signals, by drag and dropping patterns. (Mindblowingly awesome) by [@mandy3284](https://twitter.com/mandy3284)

- [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).

- [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)

  

### Installed tools

- [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.



## Sandbox



- [codesandbox](https://codesandbox.io/): Sandbox to experiment and share with people. ThreeJS template can be easily

  found.

- [codepen](https://codepen.io/): Found it hard to configure for ThreeJS x Typescript, but a good sandbox to try out new

  things.

- [threejs-editor](https://threejs.org/editor/): A nice tool to, for example, try out your Blender exports and how they

  will react in ThreeJS.



## Hosting



- [vercel](https://vercel.com/): Easy tool to host your projects, and free for a personal/hobbyist type of projects.



# Libraries

## GLSL/HLSL Shaders

- [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.



## Animation

- [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.



## Related Frameworks



### React



- [react-three-fiber](https://github.com/pmndrs/react-three-fiber): A declarative way of handling your ThreeJS stuff for

  React by [@pmndrs](https://github.com/pmndrs)

- [drei](https://github.com/pmndrs/drei): Useful helpers for react-three-fiber by [@pmndrs](https://github.com/pmndrs)

- [react-postprocessing](https://github.com/pmndrs/react-postprocessing): a postprocessing wrapper for @react-three/fiber by [@pmndrs](https://github.com/pmndrs)

- [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)

- [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.



### Angular



- [angular-three](https://github.com/nartc/angular-three): Declarative ThreeJS inspired by r3f for the Angular ecosystem

  by [@nartc](https://github.com/nartc)



### Vue



- [trois](https://github.com/troisjs/trois): The equivalent of r3f for VueJS by [@troisjs](https://github.com/troisjs)

- [TresJs](https://github.com/tresjs/tres): Declarative ThreeJS using Vue Components by [@tresjs_dev](https://github.com/Tresjs)

- [Cientos](https://github.com/Tresjs/cientos): Collection of useful helpers and fully functional, ready-made abstractions for TresJs [@tresjs_dev](https://github.com/Tresjs)

- [tres-post-processing](https://github.com/Tresjs/post-processing): Post-processing library for TresJs [@tresjs_dev](https://github.com/Tresjs)



### Svelte



- [threlte](https://github.com/grischaerbe/threlte): A three.js component library for Svelte.

- [svelte-cubed](https://github.com/Rich-Harris/svelte-cubed): Declarative ThreeJS for Svelte

  by [@Rich-Harris](https://github.com/Rich-Harris)



## Physics



- [cannon-es](https://github.com/pmndrs/cannon-es) by [@pmndrs](https://github.com/pmndrs/)

- [Ammo.js](https://github.com/kripken/ammo.js/)

- [Oimo.js](https://lo-th.github.io/Oimo.js/#basic)

- [Rapier](https://github.com/dimforge/rapier) by [@dimforge](https://github.com/dimforge/) 



## Spatial querying & Raycasting



- [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)



## Constructive Solid Geometry



- [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, ...)



## Pathfinding



- [Pathfinging.js](https://github.com/qiao/PathFinding.js) Useful library with tons of settings

- [Three-pathfinging](https://github.com/donmccurdy/three-pathfinding) Three.js plugin for navigation

- [Kompute](https://github.com/oguzeroglu/Kompute) Easy to use steering library



## Characters



- [ossos](https://github.com/sketchpunklabs/ossos) A complete character skinning & animation library for the web

- [mannequin.js](https://boytchev.github.io/mannequin.js/) Library for procedural character generation. Armature included



# Demonstrations



## Water



- [fft-ocean](https://github.com/jbouny/fft-ocean) Fast Fourier Transform ocean rendering for Three.js

- [skunami.js](https://github.com/skeelogy/skunami.js/) Marvellous project with realistic water interaction

- [Shallow water](https://vuoriov4.github.io/webgl-water-demo/) Demo project that shows water ripple effect



## Collision detection



- [Axis-Aligned Bounding Boxes](https://github.com/mozdevs/gamedev-js-3d-aabb) AABB based collision detection

- [Raycast based Collision detection](http://stemkoski.github.io/Three.js/Collision-Detection.html)



# Community



## Core



- [Stackoverflow ThreeJS](https://stackoverflow.com/questions/tagged/three.js): Forum where you can ask your questions (

  be sure to search well before)

- [Official ThreeJS Discord](https://discord.com/invite/56GBJwAnUS)

- [Official ThreeJS Forum](https://discourse.threejs.org/)

- [Official Slack](https://join.slack.com/t/threejs/shared_invite/zt-rnuegz5e-FQpc6YboDVW~5idlp7GfDw)

- [Official Twitter](https://twitter.com/threejs)

- [Official Reddit](https://www.reddit.com/r/threejs/)

# Contribute



Contributions welcome! Read the [contribution guidelines](contributing.md) first.



Or you can reach me on Twitter:



[![Twitter](https://img.shields.io/badge/Twitter-%231DA1F2.svg?style=for-the-badge&logo=Twitter&logoColor=white)](https://twitter.com/Axiome_CG)



# Related Lists



- [awesome-glsl](https://github.com/vanrez-nez/awesome-glsl) - A curated list of awesome GLSL resources.

- [awesome-webgl](https://github.com/sjfricke/awesome-webgl) - A curated list of awesome WebGL libraries, resources and

  much more.

- [awesome-webgpu](https://github.com/mikbry/awesome-webgpu) - A curated list of awesome WebGPU resources.

- [awesome-opengl](https://github.com/eug/awesome-opengl) - A curated list of awesome OpenGL libraries, debuggers and

  resources.

- [awesome-creative-coding](https://github.com/terkelg/awesome-creative-coding) - A carefully curated list of awesome

  creative coding resources primarily for beginners/intermediates.

- [awesome-computer-vision](https://github.com/jbhuang0604/awesome-computer-vision) - A curated list of awesome computer

  vision resources.

- [awesome-vulkan](https://github.com/vinjn/awesome-vulkan) - A curated list of awesome Vulkan projects and ecosystem.

- [gamedev](https://github.com/ellisonleao/magictools) - A awesome list about game development.

- [graphics-resources](https://github.com/mattdesl/graphics-resources) - A list of graphic programming resources.