Three.jsWater Pro
V2 Now Available
A production-ready water shader built with WebGPU and TSL. Realistic waves, dynamic reflections, and foam — ready to drop into any Three.js project.
Learn Three.js
Structured video courses taking you from the fundamentals to advanced real-time graphics techniques.
Introduction to Three.js
Learn the fundamentals of Three.js in this free course and create your first first 3D web app.
Destructible Environments
Learn how to add real-time, physics-based slicing and destruction to your Three.js apps and games!
Simple Water Shader
Create a realistic water shader with dynamic waves, reflections, and underwater caustics.
Assets & Tools
Production-ready Three.js starter kits, shader packs, and tools built to accelerate your projects.
Three.js Sky Pro
A complete, real-time sky system for Three.js. Volumetric clouds, dynamic atmosphere, and physically-inspired lighting.
Three.js Water Pro
A physically-based WebGPU ocean shader with FFT wave simulation, dynamic foam, caustics, and atmospheric rendering.
Assets
Coming
Soon!
Latest Articles
Tips, tutorials, and insights on Three.js and 3D web development.
How To Convert GLSL Shaders to TSL
If you've written GLSL shaders for Three.js and want to move to WebGPU, you'll need to convert them to TSL (Three.js Shading Language). TSL is Three.js's new shader system—it compiles to both GLSL and WGSL, so your shaders work on WebGL and WebGPU without maintaining two codebases.
Claude Code Skill for Three.js WebGPU and TSL Development
Claude Code recently introduced skills—reusable knowledge packages that load automatically when relevant. I built one for Three.js WebGPU and TSL development. This post covers what skills are, how they improve token efficiency, and what's included in this skill: node materials, compute shaders, post-processing, WGSL integration, and working code templates.
Raytracing a Black Hole with WebGPU
This tutorial walks through building a real-time black hole visualization using WebGPU and Three.js. We cover the physics of gravitational lensing, accretion disk rendering with Doppler beaming, and the shader math behind each effect.
on your first purchase when you subscribe
Join the Newsletter
Three.js tips, course updates, and exclusive deals — straight to your inbox.
No spam. Unsubscribe anytime.
Meet Your Instructor
Hi there, and welcome to Three.js Roadmap!
My name is Dan Greenheck and I'll be your instructor on your 3D web development journey.
A little bit about me: I'm a software engineer with over 10 years of industry experience. While 3D graphics and game development always fascinated me from a young age, it wasn't until a few years ago that I discovered Three.js and immediately fell in love.
Being able to create a 3D game or app and share it with the world was what really hooked me. Since then, I've spent countless hours learning everything I can about Three.js and 3D web development.
My goal in creating these courses is to provide you with the knowledge and tools you need to fulfill your own creative vision.
Frequently Asked Questions
Everything you need to know about the courses and platform.
What is Three.js?
Three.js is a powerful JavaScript library that enables you to create and render interactive 3D graphics directly within your browser. It's commonly used in web applications, games, and interactive experiences.
What are the prerequisites?
You should know the basics of HTML and CSS, as well as have an intermediate understanding of JavaScript, including variables, data types, objects, arrays, functions, loops, conditionals, and event handling. Don't worry if you aren't a total JavaScript expert — you can pick up concepts as you go.
Do I need to be good at math?
Not at all. While 3D programming does involve some math, you can get far with basic concepts — the courses guide you through what you need, when you need it.
How do I access the Discord server?
After creating a free account, you'll receive a one-time-use Discord invite link via email. Please wait up to 30 minutes. If it hasn't arrived, contact support@threejsroadmap.com.
Do you offer React Three Fiber courses?
Not yet — but it's on the roadmap. The goal is to offer Three.js and R3F versions of each course where applicable.
Are course updates included?
Yes. Once you purchase a course, you get all future updates for life.
What is your refund policy?
Courses: 30-day money-back guarantee. If you're unhappy for any reason, contact support@threejsroadmap.com within 30 days for a full refund.
Assets & digital downloads: All sales are final once files have been downloaded. A refund may be considered if requested within 7 days of purchase before any files are downloaded.