Three.js - Cheatsheet

🔰 Basics

A. ThreeJS_Tutorial_3DWebsite

Demo: index.html
Source Code: Github

Nr Preview Name
1 Adding a 3D Model to a Website in 5 minutes (or less)

B. ThreeJS_Tutorial_BasicWorld

Demo: index.html
Source Code: Github

Nr Preview Name
1 World
2 Cameras Introduction
3 Shadows
4 Lightning Type
5 Shaders

C. ThreeJS_Tutorial_BlendModes

Demo: index.html
Source Code: Github

Nr Preview Name
1 Blending (using WebGL/Three.js) - And How to Combine Additive and Alpha Blending

D. ThreeJS_Tutorial_CharacterController

Demo: index.html
Source Code: Github

Nr Preview Name
1 Simple Character Controller (using Three.js/JavaScript)

E. ThreeJS_Tutorial_LoadingModels

Demo: index.html
Source Code: Github

Nr Preview Name
1 Loading Models (using Three.js) - Both Static and Animated!

F. ThreeJS_Tutorial_ThirdPersonCamera

Demo: index.html
Source Code: Github

Nr Preview Name
1 Third Person Camera
🐈 Advanced

A. FlockingSimulation_Space

Demo: index.html
Source Code: Github

Nr Preview Name
1 Flocking Simulation: Boids

B. LSystems_JavaScript

Demo: index.html, index-2.html, index-3.html
Source Code: Github

Nr Preview Name
1 Procedural Plant Generation with L-Systems

C. ThreeJS_Tutorial_Fog

Demo: index.html
Source Code: Github

Nr Preview Name
1 Fog, Basic Fog, and Better Fog (Three.js Tutorial)

D. ThreeJS_Tutorial_ParticleSystems

Demo: index.html
Source Code: Github

Nr Preview Name
1 Fluffy, Soft Particles (WebGL/Three.js)
2 Writing a Particle System (using Three.js)

E. ThreeJS_Tutorial_PostProcessing

Demo: index.html
Source Code: Github

Nr Preview Name
1 [Three.js Post Processing Tutorial

F. Tutorial_SpatialHashGrid

Demo: index.html
Source Code: Github

Nr Preview Name
1 Spatial Hash Grids & Tales from Game Development

G. Tutorial_SpatialHashGrid_Optimized

Demo: index.html
Source Code: Github

⛰ī¸ Terrain

A. ProceduralTerrain Part 01

Demo: index.html
Source Code: Github

Nr Preview Name
1 3D World Generation: Heightmap Tutorial

B. ProceduralTerrain Part 02

Demo: index.html, index-2.html
Source Code: Github

Nr Preview Name
1 3D World Generation #2 (Perlin Noise)

C. ProceduralTerrain Part 03

Demo: index.html
Source Code: Github

Nr Preview Name
1 3D World Generation: #3 (Quadtree & LOD)

D. ProceduralTerrain Part 04

Demo: index.html
Source Code: Github

Nr Preview Name
1 3D World Generation: #4 (Planetary LOD): Generating Procedural Planets with Level-of-Detail!

E. ProceduralTerrain Part 05

Demo: index.html
Source Code: Github

Nr Preview Name
1 3D World Generation: #5 (Texturing): Triplanar Mapping/Infinite Splatting/Blending/Bombing

F. ProceduralTerrain Part 06

Demo: index.html
Source Code: Github

G. ProceduralTerrain Part 07

Demo: index.html
Source Code: Github

Nr Preview Name
1 3D World Generation #7: Speeding it up via Threading (JavaScript Web Workers & Three.js)

H. ProceduralTerrain Part 08

Demo: index.html
Source Code: Github

Nr Preview Name
1 3D World Generation #8: Floating Origins for Bigger Worlds (JavaScript/Three.js)

I. ProceduralTerrain Part 09

Demo: index.html
Source Code: Github

Nr Preview Name
1 Logarithmic Depth Buffers and Problems of Scale (3D World Generation #9)

J. ProceduralTerrain Part 10

Demo: index.html
Source Code: Github

Nr Preview Name
1 3D Mesh Generation, Gaps, and Stitching (3D World Generation #10)
2 Simple Biome Generation (3D World Generation #11)
3 Atmospheric Scattering (and also just faking it)
🕹ī¸ Demos

A. AStar_60000

Demo: index.html
Source Code: Github

Nr Preview Name
1 Star Wars

B. FlappyBirdClone

Demo: index.html
Source Code: Github

C. FlappyBirdClone-NNEvolve

Demo: index.html
Source Code: Github

Nr Preview Name
1 Flappy Bird

D. MazeGeneration

Demo: index.html
Source Code: Github

Nr Preview Name
1 How Many AI Agents can JavaScript Handle?

E. MinecraftClone

Demo: index.html
Source Code: Github

Nr Preview Name
1 Coding Minecraft in JavaScript

F. Quick_3D_MMORPG

Demo: index.html
Source Code: Github

Nr Preview Name
1 I Tried Making a 3D MMORPG Game in JavaScript

G. Quick_3D_RPG

Demo: index.html
Source Code: Github

Nr Preview Name
1 I Tried Making a 3D RPG Game in JavaScript

H. Quick_Game1

Demo: index.html
Source Code: Github

Nr Preview Name
1 I Tried Making a 3D Game in JavaScript

I. Quick_MinecraftClone2

Demo: index.html
Source Code: Github

Nr Preview Name
1 I made an EVEN BETTER Minecraft

J. RockPaperScissorsLizardSpock

Demo: index.html
Source Code: Github

Nr Preview Name
1 How to Code Rock Paper Scissors (JavaScript)

K. ThreeJS_Tutorial_3DSound

Demo: index.html
Source Code: Github

Nr Preview Name
1 Immersive 3D Audio and Visualization (three.js & javascript)

L. ThreeJS_Tutorial_FirstPersonCamera

Demo: index.html
Source Code: Github

Nr Preview Name
1 Building a Simple First Person Camera

M. TicTacToe_WithMinimax

Demo: index.html
Source Code: Github

Nr Preview Name
1 Tic Tac Toe with Minimax Algorithm

N. Tutorial_ChromeDinosaurGame3D

Demo: index.html
Source Code: Github

Nr Preview Name
1 Needlessly 3D Chrome Dinosaur Game (JavaScript/Three.js)

O. WebGL_1Day_3DEngine

Demo: index.html
Source Code: Github

Nr Preview Name
1 I Made a 3D Engine in 1 Day (WebGL/JavaScript)

Demos by SimonDev (Github/Youtube)

3D Ressources:

Generative 2D/3D: