React Three Fiber & GSAP ScrollTrigger ile Scroll Tabanlı 3D Web Animasyonları скачать в хорошем качестве

React Three Fiber & GSAP ScrollTrigger ile Scroll Tabanlı 3D Web Animasyonları

🎯 Bu videoda React Three Fiber (Three.js) ve GSAP ScrollTrigger kullanarak web tarayıcısında scroll tabanlı 3D animasyon oluşturuyoruz. ⏳ Zaman Damgaları 00:00:00 — Giriş & Demo Önizleme 00:00:26 — Proje kurulumu (Vite + React) 00:01:23 — Bağımlılıkların yüklenmesi (Three.js, React Three Fiber, Drei, GSAP) 00:01:47 — Varsayılan dosyaların temizlenmesi / başlangıç yapısı 00:02:27 — Temel CSS reset ve sayfa yapısının hazırlanması 00:03:21 — React Three Fiber: 3D Canvas kurulumuna giriş 00:04:03 — Mesh, geometry ve material kavramlarının tanıtımı 00:05:10 — MeshBasic vs MeshStandard materyal farkları 00:06:08 — Kamera pozisyonu ve canvas konumlandırması 00:07:51 — Sahneye ışık ekleme (Ambient & Directional) 00:09:26 — Directional light helper ve ışık ayarlarının düzeltilmesi 00:11:58 — Box geometry’yi ayrı bir komponente taşımak 00:13:35 — Scroll içeriği ve section yapısının oluşturulması 00:15:17 — Section’ların CSS ile stillendirilmesi 00:16:30 — GSAP ScrollTrigger kurulumu ve temel mantık 00:18:35 — Scroll progress yönetimi (onUpdate, scrub, lifecycle) 00:19:52 — Scroll state’in komponentlere props olarak aktarılması 00:21:00 — useFrame ile 3D modelin scroll’a bağlı rotasyon animasyonu 00:22:38 — MeshTransmissionMaterial ve environment kullanımı 00:24:25 — Genel özet ve kapanış 📍 Gerçek bir React proje yapısı içinde: 3D sahne (Canvas) mimarisini kuruyoruz GSAP ile 3D objelerin animasyonlarını tanımlıyoruz Scroll hareketini sahnedeki 3 boyutlu modele bağlıyoruz Kamera, ışık ve gölge ayarlarını yapılandırıyoruz Modern web projelerinde 3D + motion entegrasyonunu öğrenmek isteyenler için gerçek dünya odaklı, adım adım bir anlatım. 🚀 🧩 Projede Kullanılan Teknolojiler ▪ Vite – Hızlı ve modern geliştirme ortamı ▪ Three.js – WebGL tabanlı 3D grafik kütüphanesi ▪ React – Komponent tabanlı UI geliştirme ▪ React Three Fiber (R3F) – Three.js için React renderer ▪ GSAP – Yüksek performanslı animasyon kütüphanesi ▪ React Three Drei – R3F için yardımcı bileşenler ✨ Canlı demo: • https://r3f-gsap-scroll-3d-animation.... 🚀 GitHub Reposu: • https://github.com/mirzasahin/r3f-gsa... ⚡ GSAP Playlist: •    • GSAP ile Web Animasyonlarına Giriş: GSAP N...