React Three Fiber/Three.js Tutorial for Beginners | Awwwards Style Website | Gsap, ScrollControls

Overview:
In this beginner-friendly tutorial, we'll be diving into the world of 3D using React Three Fiber (react library based on three.js). This tutorial will walk you through the basics of setting up a scene, adding 3D objects, and creating scroll animations using gsap timelines. We'll be using ScrollControls from Drei (a component library for R3F) to add some smooth scroll, as well as exploring some more features of Drei to create our scene. By the end of this tutorial, you should have a solid understanding of how to use React Three Fiber to create stunning 3D experiences for your web applications.

Note: I tried to make the tutorial as basic as possible by showing how easy it is for beginners to copy and paste different components, from R3F and Drei, to build a good-looking 3d website.

Project source: https://github.com/lilsugsy/R3F-Scrol...

Packages/Tools:
Node: https://nodejs.org/en/
React: https://reactjs.org/docs/create-a-new...
Three: https://threejs.org/
R3F: https://docs.pmnd.rs/react-three-fibe...
GSAP: https://greensock.com/react/
Baffle: https://camwiegert.github.io/baffle/

Resources:
3D Models: sketchfab, CGTrader
3D textures/materials: https://www.poliigon.com/
Useful Blender channel: Polygon Runway
Cool Glyphs: https://unicode-table.com/en/blocks/b...

------------------------------------------------------------------------------

🔔 subscribe for more video tutorials just like this: https://www.youtube.com/@reecedevs?su...

------------------------------------------------------------------------------
New to Three.js? Here are some useful places to start:
Bruno Simon: https://threejs-journey.com/
Yuri Artiukh:    / @akella_  
Anderson Mancini:    / @andersonmancini  
------------------------------------------------------------------------------
Social:
Keep updates by following me on twitter:   / lilsugsy  
------------------------------------------------------------------------------
If you find anything I post helpful, feel free to support me via:
https://www.buymeacoffee.com/reecedevs