🏎️ Nissan Skyline GT-R Efsanesi - 3D İnteraktif Deneyim

Bu proje, JDM kültürünün ikonik temsilcileri olan Nissan Skyline GT-R serisinin R32, R33 ve R34 modellerini 3D interaktif deneyimle sunan modern bir web uygulamasıdır. GSAP animasyonları ve React entegrasyonu ile 3D web geliştirme teknolojilerini keşfetmek amacıyla hazırlanmıştır.

GSAP (GreenSock Animation Platform) ve React entegrasyonu ile 3D web geliştirme teknolojilerini test etmek amacıyla hazırlanmıştır. İçerik bilgilerinde yanlışlıklar bulunabilir ve tasarımsal/responsive uyumluluk sorunları yaşanabilir.

En iyi deneyim için masaüstü versiyonu denemenizi öneririm.

🚀 Proje Amacı

Bu proje, aşağıdaki amaçlarla geliştirilmiştir:

• 3D Web Teknolojilerini Test Etmek: React Three Fiber ve Three.js ile interaktif 3D sahneler oluşturma
• GSAP Entegrasyonu: GreenSock Animation Platform ile React uygulamalarında animasyon yönetimi
• Modern Web Geliştirme: Next.js 14, Tailwind CSS ve Framer Motion ile performanslı web uygulaması geliştirme
• Otomotiv Kültürü: JDM ve GT-R efsanesini dijital ortamda yaşatma

✨ Özellikler

🎯 Ana Sayfada

• Hero Section: Gradient arkaplan efektleri ve animasyonlu başlık
• Model Kartları: R32, R33 ve R34 için interaktif önizleme kartları
• Responsive Tasarım: Mobil ve masaüstü uyumlu arayüz
• Smooth Geçişler: Hover efektleri ve animasyonlu butonlar

🚗 Model Sayfalarında

• 3D Model Görselleştirme: Yüksek kaliteli GLTF formatında 3D modeller
• Interaktif Kamera: Scroll-based kamera hareketleri ve pozisyon geçişleri
• Dinamik Aydınlatma: Environment mapping ve ambient lighting
• Bölüm Navigasyonu: Farklı açılardan model inceleme imkanı
• Teknik Bilgiler: Her model için detaylı tarihsel ve teknik açıklamalar

🎨 Görsel Deneyim

• Gradient Arkaplanlar: Dinamik renk geçişleri
• Blur Efektleri: Glassmorphism tasarım yaklaşımı
• Loading Animasyonları: Model yüklenirken spinner gösterimi
• Smooth Scrolling: GSAP ile optimize edilmiş kaydırma deneyimi

🛠️ Teknoloji Stack'i

Frontend Framework

• Next.js 14 - React tabanlı full-stack framework
• React 18 - Kullanıcı arayüzü kütüphanesi
• TypeScript - Tip güvenli JavaScript

3D ve Animasyon

• @react-three/fiber - React için Three.js wrapper
• @react-three/drei - Three.js yardımcı bileşenleri
• Three.js - 3D grafik kütüphanesi
• GSAP - Yüksek performanslı animasyon kütüphanesi
• Framer Motion - React için animasyon kütüphanesi

Styling ve UI

• Tailwind CSS - Utility-first CSS framework
• PostCSS - CSS işleme aracı
• Autoprefixer - CSS vendor prefix otomasyonu

📦 Kurulum ve Çalıştırma

Gereksinimler

• Node.js 18.0 veya üzeri
• npm veya yarn paket yöneticisi

1. Projeyi Klonlayın

git clone https://github.com/grkmpasaoglu/gsap-3d-skyline.git
cd gsap-3d-skyline

2. Bağımlılıkları Yükleyin

npm install
# veya
yarn install

3. Geliştirme Sunucusunu Başlatın

npm run dev
# veya
yarn dev

4. Uygulamayı Açın

Tarayıcınızda http://localhost:3000 adresine gidin.

📁 Proje Yapısı

3D/
├── app/                          # Next.js 14 App Router
│   ├── globals.css              # Global stil tanımları
│   ├── layout.js                # Ana layout bileşeni
│   ├── page.js                  # Ana sayfa (homepage)
│   ├── (pages)/                 # Grouped routes
│   │   ├── r-32/page.js        # R32 model sayfası
│   │   ├── r-33/page.js        # R33 model sayfası
│   │   └── r-34/page.js        # R34 model sayfası
│   └── components/              # Paylaşılan bileşenler
│       └── header.js           # Navigasyon header'ı
├── public/                      # Statik dosyalar
│   ├── images/                 # Görseller ve logolar
│   └── models/                 # 3D model dosyaları
│       ├── r-32/              # R32 GLTF modeli ve textürleri
│       ├── r-33/              # R33 GLTF modeli ve textürleri
│       └── r-34/              # R34 GLTF modeli ve textürleri
├── package.json               # Proje bağımlılıkları
├── tailwind.config.js         # Tailwind CSS konfigürasyonu
├── postcss.config.js          # PostCSS konfigürasyonu
└── README.md                  # Proje dokümantasyonu

🎮 Kullanım

Ana Sayfa

• Her bir Skyline modeline ait kartlara tıklayarak model sayfalarına geçiş yapabilirsiniz
• Kartlar üzerinde hover efektleri ile görsel geri bildirim alırsınız

Model Sayfaları

• Scroll: Farklı kamera açıları arasında geçiş yapmak için
• Header Navigasyon: Diğer modellere hızlı geçiş için
• Ana Sayfa Butonu: Homepage'e dönmek için

🏗️ Build ve Deploy

Production Build

npm run build
npm start

Static Export (Opsiyonel)

# next.config.js dosyasında output: 'export' ekleyin
npm run build

🎨 3D Modeller ve Assetler

Model Formatı

• Format: GLTF 2.0 (.gltf + .bin + textures)
• Optimizasyon: Draco compression kullanılması önerilir
• Textürler: JPEG/PNG formatında optimized textures

Model Özellikleri

• R32: Klasik "Godzilla" tasarımı
• R33: Geliştirilmiş aerodinamik hatlar
• R34: Modern ve agresif stil

⚠️ Önemli Notlar

• Bu proje eğitim ve test amaçlı geliştirilmiştir
• 3D modeller demo amaçlı kullanılmıştır, telif hakları ilgili sahiplerine aittir
• İçerik bilgilerinde yanlışlıklar bulunabilir
• Tasarımsal ve responsive uyumluluk sorunları yaşanabilir
• En iyi deneyim için masaüstü tarayıcılar önerilir

🤝 Katkıda Bulunma

1. Bu repoyu fork edin
2. Feature branch oluşturun (git checkout -b feature/amazing-feature)
3. Değişikliklerinizi commit edin (git commit -m 'Add amazing feature')
4. Branch'inizi push edin (git push origin feature/amazing-feature)
5. Pull Request oluşturun

📄 Lisans

Bu proje eğitim amaçlı geliştirilmiştir. 3D modeller ve görseller ilgili telif hakkı sahiplerine aittir.

👨‍💻 Geliştirici

Görkem Paşaoğlu

• GitHub: @grkmpasaoglu

---

⭐ Bu projeyi beğendiyseniz star vermeyi unutmayın!

Katkı

Katkıda bulunmak için lütfen bir fork oluşturun ve pull request gönderin.

Lisans

Bu proje MIT lisansı ile lisanslanmıştır.

---