Threejs & React Avatar Builder Tutorial - Part 2: PocketBase

Learn how to build a professional avatar builder with Three.js and React Three Fiber! In this second part, we will use PocketBase as our Backend as a Service solution and Zustand for our global store.

🚀 Learn React Three Fiber with the Ultimate Guide to 3D Web Development ✨
https://lessons.wawasensei.dev/courses/react-three-fiber/

Demo 🔗
https://avatar.wawasensei.dev/

Second part code 🔗
https://github.com/wass08/r3f-ultimate-character-configurator-part-2

Final code 🔗
https://github.com/wass08/r3f-ultimate-character-configurator

#threejs #webdevelopment #reactthreefiber

▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬

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

▬▬▬▬▬▬ Support the channel 🙏 ▬▬▬▬▬▬

Become a member to get access to awesome perks:
https://www.youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/join

▬▬▬▬▬▬ Connect with me 👋 ▬▬▬▬▬▬

💻 The Discord Community
https://discord.gg/2wBhwchcWu

📸 Instagram :
https://instagram.com/wawa.sensei

🎎 Facebook :
https://www.facebook.com/wawasenseiyt

🐦Twitter :
https://twitter.com/wawasensei

🐦TikTok :
https://www.tiktok.com/@wawasensei08


▬▬▬▬▬▬ T I M E S T A M P S ⏰ ▬▬▬▬▬▬

00:00 Introduction
00:09 PocketBase collections creation
07:27 Fetching Data into Zustand Store
13:20 Draft UI
21:23 Next part preview

Тэги:

#threejs #three_js_tutorial #threejs_tutorial #react_three_fiber #react_three_fiber_tutorial #three_js_react #three_js #three.js #threejs_journey #threejs_course #react_three_fiber_ultimate_guide #r3f_tutorial #how_to_learn_r3f #how_to_learn_react_three_fiber #threejs_for_beginners #learn_threejs #threejs_character_customization #3d_avatar_builder #3d_character_builder #threejs_avatar #threejs_character_creator #pocketbase_tutorial #creative_coding #3d_website_tutorial

Скачать видео