Uploaded November 2024 | Updated September 2026, 1 week ago
Learn how to build a 3D Avatar Creator with Three.js and React Three Fiber from scratch! In this complete threejs course we will learn step by step how to:
- Compose avatars using 3D assets fetched from a database
- Download and optimize it into a GLB file
- Take picture of our avatar
- Add animations and poses on our character
- Create compatible 3D assets
- Use your avatar in your projects
🚀 Learn React Three Fiber with the Ultimate Guide to 3D Web Development ✨
https://wawasensei.dev/courses/react-three-fiber/
Demo 🔗
https://avatar.wawasensei.dev/
Final code 🔗
github.com/wass08/r3f-ultimate-character-configurator
#threejs #reactjs #reactthreefiber
▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬
Enable CICD and deploy your project with Elestio
elest.io
Kirzozz
instagram.com/kirzozz
Create a React App with Vite
https://vitejs.dev/guide/
React Three Fiber
https://r3f.docs.pmnd.rs/getting-started/introduction
TailwindCSS install
tailwindcss.com/docs/guides/vite
Threejs
threejs.org
Deploy your PocketBase instance with Elestio
elest.io/open-source/pocketbase
PocketBase Files Handling
pocketbase.io/docs/files-handling#file-url
Zustand State Management
github.com/pmndrs/zustand
Setting up Environment Variables with Vite
https://vitejs.dev/guide/env-and-mode.html
Skinned meshes
threejs.org/docs/?q=skinn#api/en/objects/SkinnedMesh
GLTFExporter
threejs.org/docs/#examples/en/exporters/GLTFExporter
Threejs Material
threejs.org/docs/#api/en/materials/Material
Google Fonts
fonts.google.com
HeroIcons
heroicons.com
React Color
casesandberg.github.io/react-color
Blender
blender.org
Mixamo
mixamo.com/#
React Three Post-Processing
github.com/pmndrs/react-postprocessing
React Spring
https://react-spring.dev/
Gltf-transform
github.com/donmccurdy/glTF-Transform
▬▬▬▬▬▬ Support the channel 🙏 ▬▬▬▬▬▬
Become a member to get access to awesome perks:
youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/join
▬▬▬▬▬▬ Connect with me 👋 ▬▬▬▬▬▬
💻 The Discord Community
discord.gg/2wBhwchcWu
📸 Instagram :
instagram.com/wawa.sensei
🎎 Facebook :
facebook.com/wawasenseiyt
🐦Twitter :
twitter.com/wawasensei
🐦TikTok :
tiktok.com/@wawasensei08
▬▬▬▬▬▬ T I M E S T A M P S ⏰ ▬▬▬▬▬▬
00:00:00 Introduction
00:01:30 Project setup
00:06:22 Build and Deploy (CICD)
00:08:57 PocketBase collections creation
00:16:15 Fetching Data into Zustand Store
00:22:08 Draft UI
00:30:12 Blender Assets Explanation
00:32:50 Asset Selection
00:35:17 Avatar composition
00:45:06 Scene lights & shadows
00:48:07 Default asset
00:50:54 Playing animations
00:52:13 Download button
00:56:32 Color palettes
01:02:15 UI Enhancement
01:04:52 Color Picker
01:07:08 Update material colors
01:08:48 Skin color
01:11:36 Removable assets
01:13:56 Randomize button
01:17:22 Custom asset creation
01:22:27 Attach skin to asset
01:27:20 Asset rigging to the armature
01:30:09 Thumbnail generation
01:40:11 Uploading asset & thumbnail
01:42:08 Group locking mechanism
01:48:36 UI Adjustment
01:49:23 Uploading all assets (fix)
01:50:47 More UI adjustments
01:51:25 Camera Controls
01:59:50 Scene adjustments
02:02:49 Poses & Animations
02:06:52 Photo booth mode
02:11:17 Screenshot
02:16:10 Bloom Post-Processing
02:17:21 Responsive Adjustments
02:18:31 Loading Screen
02:21:26 React Spring Transitions
02:30:44 Gltf-transform Optimizations
02:33:25 Use avatar on your project
02:34:02 Use avatar with the 3rd Person Controller
02:39:42 Use avatar on the AI Virtual Girlfriend
02:48:04 Continue learning Threejs
Learn how to build a 3D Avatar Creator with Three.js and React Three Fiber from scratch! In this complete threejs course we will learn step by step how to:
- Compose avatars using 3D assets fetched from a database
- Download and optimize it into a GLB file
- Take picture of our avatar
- Add animations and poses on our character
- Create compatible 3D assets
- Use your avatar in your projects
🚀 Learn React Three Fiber with the Ultimate Guide to 3D Web Development ✨
https://wawasensei.dev/courses/react-three-fiber/
Demo 🔗
https://avatar.wawasensei.dev/
Final code 🔗
github.com/wass08/r3f-ultimate-character-configurator
#threejs #reactjs #reactthreefiber
▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬
Enable CICD and deploy your project with Elestio
elest.io
Kirzozz
instagram.com/kirzozz
Create a React App with Vite
https://vitejs.dev/guide/
React Three Fiber
https://r3f.docs.pmnd.rs/getting-started/introduction
TailwindCSS install
tailwindcss.com/docs/guides/vite
Threejs
threejs.org
Deploy your PocketBase instance with Elestio
elest.io/open-source/pocketbase
PocketBase Files Handling
pocketbase.io/docs/files-handling#file-url
Zustand State Management
github.com/pmndrs/zustand
Setting up Environment Variables with Vite
https://vitejs.dev/guide/env-and-mode.html
Skinned meshes
threejs.org/docs/?q=skinn#api/en/objects/SkinnedMesh
GLTFExporter
threejs.org/docs/#examples/en/exporters/GLTFExporter
Threejs Material
threejs.org/docs/#api/en/materials/Material
Google Fonts
fonts.google.com
HeroIcons
heroicons.com
React Color
casesandberg.github.io/react-color
Blender
blender.org
Mixamo
mixamo.com/#
React Three Post-Processing
github.com/pmndrs/react-postprocessing
React Spring
https://react-spring.dev/
Gltf-transform
github.com/donmccurdy/glTF-Transform
▬▬▬▬▬▬ Support the channel 🙏 ▬▬▬▬▬▬
Become a member to get access to awesome perks:
youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/join
▬▬▬▬▬▬ Connect with me 👋 ▬▬▬▬▬▬
💻 The Discord Community
discord.gg/2wBhwchcWu
📸 Instagram :
instagram.com/wawa.sensei
🎎 Facebook :
facebook.com/wawasenseiyt
🐦Twitter :
twitter.com/wawasensei
🐦TikTok :
tiktok.com/@wawasensei08
▬▬▬▬▬▬ T I M E S T A M P S ⏰ ▬▬▬▬▬▬
00:00:00 Introduction
00:01:30 Project setup
00:06:22 Build and Deploy (CICD)
00:08:57 PocketBase collections creation
00:16:15 Fetching Data into Zustand Store
00:22:08 Draft UI
00:30:12 Blender Assets Explanation
00:32:50 Asset Selection
00:35:17 Avatar composition
00:45:06 Scene lights & shadows
00:48:07 Default asset
00:50:54 Playing animations
00:52:13 Download button
00:56:32 Color palettes
01:02:15 UI Enhancement
01:04:52 Color Picker
01:07:08 Update material colors
01:08:48 Skin color
01:11:36 Removable assets
01:13:56 Randomize button
01:17:22 Custom asset creation
01:22:27 Attach skin to asset
01:27:20 Asset rigging to the armature
01:30:09 Thumbnail generation
01:40:11 Uploading asset & thumbnail
01:42:08 Group locking mechanism
01:48:36 UI Adjustment
01:49:23 Uploading all assets (fix)
01:50:47 More UI adjustments
01:51:25 Camera Controls
01:59:50 Scene adjustments
02:02:49 Poses & Animations
02:06:52 Photo booth mode
02:11:17 Screenshot
02:16:10 Bloom Post-Processing
02:17:21 Responsive Adjustments
02:18:31 Loading Screen
02:21:26 React Spring Transitions
02:30:44 Gltf-transform Optimizations
02:33:25 Use avatar on your project
02:34:02 Use avatar with the 3rd Person Controller
02:39:42 Use avatar on the AI Virtual Girlfriend
02:48:04 Continue learning Threejs
