Üç.js ve Laravel ile Canlı 3D Galaksi Oluşturma Sürecim

Son güncelleme: 21 Mayıs 2026 22:28

Fikir

Büyüleyici bir şey inşa etmek istedim; her yıldızın özel birine adanabileceği 3D bir galaksi. Bir hediye, bir anı veya sonsuza kadar sürecek bir mesaj.

Sonuç: Galaxiana — https://galaxiana.com

Teknoloji Yığını

Three.js — Instanced mesh ile 3D render (60fps’de 50k+ yıldız)
Laravel — backend, API, Stripe webhooks
Stripe — Checkout Sessions ile ödemeler
MySQL — yıldız verileri, satın alımlar

En Zor Kısım

50,000+ yıldızı akıcı bir şekilde render etmek, Three.js içindeki instanced mesh kullanmayı gerektirdi. 50k bireysel nesne yerine, tek bir draw call her şeyi işler.

const geometry = new THREE.SphereGeometry(1, 4, 4);
        const material = new THREE.MeshBasicMaterial();
        const mesh = new THREE.InstancedMesh(geometry, material, STAR_COUNT);

Stripe Entegrasyonu

Özel ödeme formları yerine Checkout Sessions seçtim; daha hızlı inşa ediliyor ve Stripe tüm köşe durumlarını yönetiyor. Anahtar görüş: ödeme öncesi tüm yıldız verilerini payment_intent.metadata içinde saklayın, DB’nizde değil. Bu şekilde asılı kayıtlarınız olmaz.