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...