Build a 3D Avatar Builder with Threejs and React - Full Course
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 š
https://github.com/wass08/r3f-ultimate-character-configurator
#threejs #reactjs #reactthreefiber
Resources
Enable CICD and deploy your project with Elestio
Kirzozz
https://www.instagram.com/kirzozz/
Create a React App with Vite
React Three Fiber
https://r3f.docs.pmnd.rs/getting-started/introduction
TailwindCSS install
https://tailwindcss.com/docs/guides/vite
Threejs
Deploy your PocketBase instance with Elestio
https://elest.io/open-source/pocketbase
PocketBase Files Handling
https://pocketbase.io/docs/files-handling**#file**-url
Zustand State Management
https://github.com/pmndrs/zustand
Setting up Environment Variables with Vite
https://vitejs.dev/guide/env-and-mode.html
Skinned meshes
https://threejs.org/docs/?q=skinn**#api**/en/objects/SkinnedMesh
GLTFExporter
https://threejs.org/docs/**#examples**/en/exporters/GLTFExporter
Threejs Material
https://threejs.org/docs/**#api**/en/materials/Material
Google Fonts
HeroIcons
React Color
https://casesandberg.github.io/react-color/
Blender
Mixamo
React Three Post-Processing
https://github.com/pmndrs/react-postprocessing
React Spring
Gltf-transform
https://github.com/donmccurdy/glTF-Transform
Need help with this tutorial? Join our Discord community!