Create STUNNING 3D Scroll Animations with Next.js | Step-by-Step Guide
To try everything Brilliant has to offer—free—for a full 30 days, visit https://brilliant.org/DanGreenheck/ . You’ll also get 20% off an annual premium subscription
📚 Want more Three.js resources? Check out my collection of courses, from beginner to advanced!
https://threejsroadmap.com
⭐️ THREE.JS
https://threejs.org
⭐️ REACT-THREE-FIBER
https://r3f.docs.pmnd.rs
⭐️ GSAP
https://gsap.com
💻 MACBOOK 3D MODEL
https://www.cgtrader.com/items/2038937/
👨🏻💻 SOURCE CODE
https://github.com/dgreenheck/nextjs-...
🎮 LIVE DEMO
https://dgreenheck.github.io/nextjs-3...
This video was sponsored by Brilliant.
0:00 Intro
0:59 Sponsored Message
2:26 Starter Project
4:53 Finding a 3D Model
6:27 Prepping Model in Blender
8:54 Installing Dependencies
10:33 Scene Component
17:16 Importing The Laptop Model
25:28 Animating Laptop Model
43:38 Animating Text Opacity
48:54 Adding Shadows