Build a REAL screensaver using React Three Fiber (Part 1)

Video Description

How do screensavers REALLY work under the hood? In this series you will learn how to rebuild the classic 3D pipes screensaver using React Three Fiber. We will: - Quickly go back in time to the Windows 95 screensaver era to see what we’re getting ourselves in to - Jump back to the 21 century and recreate the 3D pipes screensaver using Three.js and React Specifically we will learn how to: - Scaffold an Electron project with React and Three.js - Change the origin of a Three.js object - Perform nested prop piercing in React Three Fiber to better access nested Three.js properties - Create declarative animation using react-spring and how that really works under the hood - Make your React Three Fiber component extend a Three.js Group. - Assemble multiple segments into a pipe collection declaratively using state - Do a little bit of vector math so that we can calculate each segment’s position and rotation - Compare quaternions with Euler rotations - Compare imperative vs. declarative approaches in R3F - Talk about React best practices with regard to useEffect All of this while rebuilding the classic 3D pipe screensaver! 00:00 Why? 00:40 Agenda 02:08 Screensaver history 03:14 Funny story 04:47 How are screensavers made? 06:12 Electron 07:30 Up next!