React Three Fiber & Drei ile Web’de 3D Organ Görselleştirme: Performans ve Durum Senkronizasyonu

Organ Information System projesinde temel amaç, kullanıcılara interaktif bir 3D deneyimi sunarken sayfanın akıcılığını ve etkileşim hızını 60 FPS seviyesinde tutmaktı. Ancak Three.js ile React dünyasını birleştirirken karşılaşılan en büyük handikap, React re-render mantığı ile Three.js render loop’unun çatışmasıdır.

1. Model Yükleme ve Geometry Optimizasyonu

GLTF/GLB modellerini @react-three/drei kütüphanesinin useGLTF hook’u ile yüklerken mesh hiyerarşisini basitleştirdim. Yüksek poligonlu modeller yerine Draco compression uygulayarak dosya boyutlarını %70 oranında düşürdüm.

2. useFrame ile State Güncellemelerini Ayırma

Her animasyon karesinde useState tetiklemek React ağacının tamamını kilitler. Bunun yerine useRef ve R3F’in useFrame kancasını kullanarak doğrudan GPU matrislerine müdahale ettim. Bu yaklaşım FPS dalgalanmalarını tamamen sıfırladı.