Learn Courses Lessons Articles

⌘K

Browse

Search

Find courses, lessons, articles, talks, and podcasts.

Loading resources.

learn by doing,
two minutes at a time.

LearnCourses Lessons Articles

Watch & listenPodcasts Talks

StoriesCase studies Success stories Campaigns Browse everything →

© 2013–2026 egghead.iothe egg does not crack 🥚

all systems sunny-side up↑ Back to top

Search | egghead

Learn Courses Lessons Articles

⌘K

24 resources

campaignLegacy Campaign Archive
lessonOrganize your Three.js Project - Part 3Extract the Three.js camera into a factory function that subscribes to a shared resize observer and returns a dispose method.
lessonOrganize your Three.js Project - Part 2Extract the Three.js renderer into its own factory function that accepts a canvas and resize observer, returning a dispose method for proper cleanup.
lessonOrganize your Three.js Project - Part IRefactor a messy Three.js main.ts into scalable, maintainable code using factory composition.
lessonDebug with TweakpaneIntegrate Tweakpane to create a live debug panel for scene parameters. Add controls for object position, rotation, and material color that update in real time without touching the code.
lessonResize scene along with browser windowListen for window resize events to update the camera aspect ratio and renderer size. Prevent the scene from stretching or distorting when the browser window changes dimensions.
lessonAnimationsCreate a render loop using requestAnimationFrame and Three.js's Clock to animate objects smoothly. Use delta and elapsed time values to keep animations frame-rate independent.
lessonRotating objectsUse the rotation property to rotate objects around the X, Y, and Z axes. Learn why Three.js uses radians instead of degrees, how to convert between them using Math.PI, and how rotation direction is determined by sign.
lessonScaling objectsUse the scale property to resize objects along each axis independently. Learn that scale values are multipliers on the geometry's original dimensions, and use MeshNormalMaterial to better visualize face changes while experimenting.
lessonTransform objects positionMove objects along the X, Y, and Z axes using the position property. Add an AxesHelper to stay oriented in 3D space, use position.set() to avoid verbose code, and learn what a Vector3 actually is with a visual explanation.
lessonCamera and RendererSet up a PerspectiveCamera by understanding FOV and aspect ratio, initialize a WebGLRenderer tied to a canvas element, and fix the most common beginner mistake: camera and object starting at the same position.
lessonAdd objects to the sceneCreate a Mesh by combining a BoxGeometry with a MeshBasicMaterial, add it to the scene, and render it.
lessonInstall three.js and @types/threeInstall the three package and @types/three for full TypeScript support. Import Three.js into the project and confirm the types are working.
lessonElements of a 3D sceneWalk through the core building blocks of every Three.js scene. Every 3D scene out there is composed of the same main elements:
lessonCreate a new Vite ProjectScaffold a new project using pnpm create vite, select the Vanilla TypeScript template, and verify the dev server runs correctly.
courseModern Three.js CourseBuild 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.
lessonPush a New Branch to github that Doesn't Exist Remotely YetWe'll make a new feature branch with:
lessonCleanup and Delete Branches After a Pull RequestWe've made a pull request and now we can clean up the branches by deleting the feature branch.
lessonAdd a File to a Previous Commit with Interactive RebaseWe're going to pick a previous commit and enter an interactive rebase with:
lessonMove a Commit that was Committed on the Wrong BranchWe'll do some work and commit it - but then realize it was on the wrong branch!
lessonChange the Commit Message of a Previous Commit with Interactive RebaseWe'll go back into our history with
lessonExplore Old Commits with a Detached HEAD, and then RecoverTo poke around in old code, we can checkout the hash of an old commit with git checkout [HASH] - but then we'll be in a "detached HEAD" state.
lessonRemove Files from Staging Before CommittingIf you've added files to the staging area (the Index) accidentally - you can remove them using git reset.
lessonRemove Changes from a Commit Before PushingIf we've already committed changes that we don't want to push, we can also remove those with git reset, but we're going to reset back to a specific commit, either with: