Building a 3D Flappy Bird Game with Three.js | React, Blender and TypeScript Full Tutorial/Course

The bird is back, and it’s furious. Let’s build a 3D remake of Flappy Bird with Three.js (React-Three-Fiber), TypeScript + React, and Blender, no AI involved. The project is divided in three sections: Concept Art, Asset Modelling, and Software Development.

I’ll explain everything from scratch, so you don’t really need experience with 3D Modelling and only very basic coding concepts.

CHAPTERS:

00:00:00 Intro
00:00:50 Project Overview
00:02:13 Part I - Concept Art
00:06:31 Part II - 3D Modelling Intro
00:06:58 0.1 Installing Blender
00:08:09 0.2 Configuring Blender
00:12:07 1. Statue of Liberty
01:00:12 2. Chrysler Building
01:41:57 3. Empire State Building
01:48:27 4. Central Park Tower
01:54:50 5. Brooklyn Tower
02:02:15 6. One World Trade Center
02:10:27 7. Flatiron Building
02:25:51 8. New York Scene
02:38:41 9. The Bird
02:46:52 10. Exporting as .glb
02:48:23 Part III - Software Development Intro
02:48:46 1. Repo Setup
02:50:29 2. Creating initial files
02:53:14 3. Rendering scene in NewYork.tsx
02:56:01 4. Adding debug variables for camera and dLight
02:58:51 5. Adding OrthographicCamera to App.tsx
03:00:15 6. Commenting out OrbitControls to work with OrthographicCamera
03:01:38 7. Setting up the first slice in NewYork.tsx's useEffect
03:04:33 8. Creating the addPlatform function
03:07:17 9. Creating boundingBoxesMapAtom and adding bboxes to it
03:11:08 10. Refactor - Creating addBboxes
03:12:15 11. addBoxes - Including logic to create a sensor bbox between pipes
03:13:49 12. Creating movePlatformToFront
03:16:20 13. Start moving platforms in useFrame
03:18:56 14. Setting up all slices on init
03:20:05 15. Fix updateSensors - Trim bbox size
03:20:49 16. Setting up game loop in useFrame
03:23:12 17. Bird.tsx Initial Setup
03:25:04 18. Using a custom cube as the bird bbox
03:26:32 19. Adding the bird's gliding animation (without gsap)
03:28:09 20. Using gsap for the gliding animation
03:29:33 21. Basic game logic setup: Applying gravity to the bird
03:31:58 22. Setting up jump logic
03:34:05 23. Rotating the bird as it falls
03:37:25 24. Adding changeAction for animation management
03:41:07 25. InteractUI.tsx - Setting up the basic homepage structure
03:43:56 26. Creating Button.tsx
03:46:03 27. Adding styles for start_message
03:47:19 28. Adding rearrangePipe
03:53:19 29. Setting pipes playing offset
03:58:01 30. Making bird stay still on game over
04:01:00 31. Adding impact sprite on collision
04:03:33 32. Animating UI exit on game start
04:06:18 33. Setting up camera rotations on game over
04:09:54 34. Setting up game over text and modal
04:14:10 35. Implementing score logic
04:19:45 36. Adding restart game logic
04:23:47 37. Always leave a distance of 1 pipe from the player when starting a game
04:26:31 38. Setting up bird selection UI
04:31:56 39. Creating db functions
04:34:15 40. Implementing bird skin (texture) preview
04:38:11 41. Adding bird (skins) unlock logic
04:44:01 42. Setting a max bird Y limit and creating restartGameAndSelectBird button
04:46:15 43. Adding bg_texture, updateBackground, and a second bush
04:53:41 44. Adding gameLoadedAtom and adjusting game variables
04:56:02 45. Disabling dev helpers (extra)
04:57:21 46. Building for production
04:59:28 Ending

PROJECT REPOS

Original repo: https://github.com/Lietsaki/bird-in-boots-3d
Tutorial repo: https://github.com/Lietsaki/bird-in-boots-yt

☆ ☆ ☆ Check out my other projects ☆ ☆ ☆

https://ricardosandez.com - My 3D portfolio.

https://paperchat.net - A real-time chat and drawing application inspired by Pictochat from the Nintendo DS.

https://trainingmode.pro - A fighting game combo simulator.

CONTACT

I don’t really use social media, so here’s my LinkedIn: https://www.linkedin.com/in/ricardo-sandez/

#flappybird #blender3d #threejs #reactjstutorial
Flappy Bird 3D
react three fiber tutorial
blender flappy bird
javascript flappy bird
react flappy bird

Видео Building a 3D Flappy Bird Game with Three.js | React, Blender and TypeScript Full Tutorial/Course канала tanuki3D