Dive into a comprehensive series of Three.js tutorials covering a wide range of topics in 3D web development. Learn to create interactive 3D scenes, implement physics simulations, work with shaders, and integrate AI behaviors. Master essential techniques like object rotation, model importing, and camera controls. Explore advanced concepts such as steering behaviors, finite state machines, and performance optimization. Develop practical skills through hands-on projects, including a solar system simulation, self-driving car, 3D card game, and audio visualizer. Gain expertise in GLSL, post-processing effects, and custom shaders. Perfect for beginners and experienced developers alike, these tutorials provide a solid foundation for creating immersive 3D web experiences using Three.js and related technologies.
Overview
Syllabus
Three.js Tutorial For Absolute Beginners
How To Make An Object Rotate Around Another Object In Three.js - Create A Solar System
How To Export 3D Models With Their Animation From Blender And Import Them Into Your Three.js App
GLSL & Shaders Tutorial - Understanding The Syntax And The Idea Behind The Vertex & Fragment Shaders
Cannon.js Tutorial For Beginners - Add Gravity, Collision, And Other Physics Laws To Your 3D Web App
How To Create Objects On Mouse Click In Three.js
How To Create Multi-Colored Bouncing Balls On Mouse Click Using Three.js And Cannon.js
How To Subdivide A Plane Into Even Squares In Three.js
How To Find The Materials Of A Loaded Model - Three.js Tutorial
Cloning And Animating Models Loaded From glTF Files - Three.js Tutorial
How To Create Realistic Scenes In Three.js - Tone Mapping, HDR, Gamma Correction, sRGB Color Space
How To Import A Model From Sketchfab.com To Your Three.js Web App
Replacing Models & GLTF Caching In Three.js
How To Create A Loading Screen For Your Three.js App
Camera Movement In Three.js Using GSAP
Create An Immersive Experience With Three.js And GSAP
Path Following Steering Behavior With Yuka - Three.js & AI Tutorial
Create A Self-Driving Car Using Three.js & Yuka - 3D/AI Tutorial
Seek Steering Behavior With Yuka - Three.js & AI Tutorial
Arrive Steering Behavior With Yuka - Three.js & AI Tutorial
Make A Vehicle Go To A Certain Position On Mouse Click - Three.js & Yuka Tutorial
Flee Steering Behavior With Yuka - Three.js & AI Tutorial
Obstacle Avoidance Steering Behavior With Yuka - Three.js & AI Tutorial
Clone And Animate Randomly Moving Fishes Using Three.js & Yuka
Pursuit Steering Behavior With Yuka - Three.js & AI Tutorial
Offset Pursuit Steering Behavior With Yuka - Three.js & AI Tutorial
Wander Steering Behavior With Yuka - Three.js & AI Tutorial
Flocking Steering Behavior With Yuka - Three.js & AI Tutorial
Interpose Steering Behavior With Yuka - Three.js & AI Tutorial
Your Guide To The Orbit Controls Module In Three.js
How To Create A Realistic Sphere Of Glass Using Three.js
Unreal Bloom Pass - Three.js Post-Processing Tutorial
Lock Constraint With Cannon-es | Three.js Physics Tutorial
How To Make A Loaded Model Cast Shadow In Three.js
How To Chain A Model Animations In Three.js
Distance Constraint With Cannon-es - Three.js Physics Tutorial
Make Obstacles And Restricted Areas In A Map Using Navigation Meshes - Three.js & Yuka Tutorial
Cloth Simulation Using Distance Constraint - Three.js & Cannon-es Tutorial
Finite State Machines With Yuka And Three.js - A.I And WebGL Tutorial
How To Add HTML Elements To A Three.js Scene
Create 100,000+ Objects With Instancing - Three.js Instanced Rendering Tutorial
.glb/.gltf Files Compression With Draco Loader - Three.js Models Size Reduction Tutorial
Create A 3D Driving Test Quiz Using Three.js, Yuka, and GSAP
Create A 3D Card Game Using Three.js And GSAP
Object Occlusion In Three.js
Smooth Camera Zoom In Three.js
Better Performance With LOD (Level Of Detail) In Three.js
How To Host Your Three.js App On Github Pages
Gimbal Lock And Quaternions - Three.js Tutorial
Layers in Three.js
Unreal Bloom Selective - Three.js Tutorial
GLSL Snacks - Episode 5.0
GLSL Snacks - Episode 7.0
GLSL Snacks - Episode 8.0
GLSL Snacks - Episode 9.0
Cursor Following Camera Animation - Three.js Tutorial
How To Make An Animated Blob Using Vertex Shader And Perlin Noise - Three.js Tutorial
How To Create A 3D Audio Visualizer Using Three.js
How To Make Your Shader Material Affected By Light - Extend Three.js Built-in Materials
How To Use Raycaster In A Non FullScreen Scene In Three.js
How To Make A Minimap In Three.js
Associate Map Objects With Minimap Symbols - Three.js Tutorial
How To Make An Object Follow A Path In Three.js
Add Moving Objects And Associate Them With Minimap Symbols - Three.js Tutorial
Bones, Skeletons, And SkinnedMeshes In Three.js
How To Make A Model's Head Face The Cursor's Position - Three.js Tutorial
Taught by
Wael Yasmina
