Modern Three.js Course

Build production-ready 3D experiences on the web with Three.js, TypeScript, and Vite. This workshop takes you from an empty project to a modular, maintainable Three.js application using the same architectural patterns you'd reach for on a real product team.

You'll start by scaffolding a Vanilla TypeScript Vite project and wiring up three with full @types/three support. From there, you'll build up the core building blocks of every 3D scene: the Scene, Camera, Renderer, and Canvas. And, develop a mental model for how they fit together before a single pixel hits the screen.

Once the fundamentals click, you'll bring the scene to life. You'll add meshes with BoxGeometry and MeshBasicMaterial, translate and orient them using position, rotation, and scale, and learn what a Vector3 actually represents in 3D space. You'll drive smooth, frame-rate independent motion with requestAnimationFrame and Three.js's Clock, and make the canvas feel native to the browser by handling window resize events without stretching or distortion. You'll wire up Tweakpane to build a live debug panel so you can tune scene parameters in real time instead of bouncing back to the editor.

The back half of the workshop is where most Three.js tutorials stop, and where this one pushes further. You'll refactor a messy main.ts into a set of composable factory functions, each owning its own subsystem (renderer, camera, resize observer) and exposing a dispose method for clean teardown. You'll handle Vite's hot module replacement with import.meta.hot so cameras, renderers, and WebGL contexts are properly cleaned up between reloads, preventing the memory leaks and duplicated contexts that quietly kill dev performance in real projects.

By the end, you'll have a scalable Three.js project structure, a working debug workflow, and the architectural instincts to keep a 3D codebase maintainable as it grows.

What you'll learn

• Scaffolding a Three.js project with Vite and TypeScript
• The anatomy of a 3D scene: Scene, Camera, Renderer, Canvas
• Transforming objects with position, rotation, and scale
• Building a frame-rate independent animation loop
• Handling resize and HMR without leaking WebGL contexts
• Debugging scenes live with Tweakpane
• Factory composition and dispose patterns for modular Three.js code

Who this is for

Developers comfortable with TypeScript and modern frontend tooling who want to move past copy-paste Three.js snippets and build 3D applications with the same rigor they'd apply to the rest of their stack.