Back to videos

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

https://elest.io/

Kirzozz

https://www.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

https://tailwindcss.com/docs/guides/vite

Threejs

https://threejs.org/

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

https://fonts.google.com/

HeroIcons

https://heroicons.com/

React Color

https://casesandberg.github.io/react-color/

Blender

https://www.blender.org/

Mixamo

https://www.mixamo.com/#/

React Three Post-Processing

https://github.com/pmndrs/react-postprocessing

React Spring

https://react-spring.dev/

Gltf-transform

https://github.com/donmccurdy/glTF-Transform

Need help with this tutorial? Join our Discord community!