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.