Yazar: The Bugged Dev
Canlı deneyin Bu proje hakkında
Anatomy Atelier; kalp, beyin, akciğerler, karaciğer, böbrekler, göz, bağırsak, pankreas ve deriyi aranabilir dokuz organlık tek bir kütüphanede buluşturur. Her kayıt; döndürülebilen ve yakınlaştırılabilen bir 3D örneği yapısal sıcak noktalar, temel bilgiler ve öğrenme kartlarıyla, ayrıca kesit, katman, izolasyon ve organ karşılaştırma araçlarıyla birleştirir.
Keşif; dersler, basit animasyonlu illüstrasyonlar ve testlerle modelin ötesine taşınır. GLTFLoader ve Meshopt kod çözücü her varlığı yükler; üç organlık önbellek, önceden getirme ve isteğe bağlı işleme ise sık geçişlerin akıcı kalmasını sağlar.
Öne çıkanlar
- Dokuz organ arasında arama yapıp geçiş yapın: kalp, beyin, akciğerler, karaciğer, böbrekler, göz, bağırsak, pankreas ve deri.
- Döndürmek için sürükleyin, yakınlaştırmak için kaydırın ve yapısal notlar için sıcak noktaları seçin; kesintisiz görünüm için otomatik döndürmeyi de açık bırakabilirsiniz.
- İç yapıları incelemek için kesitleri kullanın, tel kafes katman görünümüne geçin veya izolasyon modunda kaide ile temas gölgesini soluklaştırın; karşılaştırma modu iki organı yan yana gösterir.
- Organ bilgileri ve öğrenme kartlarından derslere ve testlere geçerek serbest keşfi rehberli çalışmayla genişletin.
Teknik inceleme
3D varlıklar · Tripo organ kütüphanesi
Dokuz organ, sahne düğümleri ve malzemeleri Tripo tanımlayıcıları taşıyan ayrı GLB varlıkları olarak sunulur. GLTFLoader, Meshopt kod çözücüyle birlikte her organı aynı görüntüleme alanında yükler, ölçekler ve ortalar; böylece sıcak noktalar ile görüntüleyici araçları aynı koordinat sistemini paylaşabilir.
Görüntüleyici etkileşimi · kontroller ve ekran uzayı sıcak noktaları
OrbitControls döndürme, yakınlaştırma ve otomatik döndürmeyi yönetir. Sıcak noktalar işaretçi seçimi için ekran uzayı projeksiyonunu kullanırken, derinlik tamponu ve yön testleri tekrarlanan mesh ışın testlerine gerek kalmadan görünürlüğü yönetir. Kırpma düzlemleri kesitleri sağlar, tel kafes anahtarı katman görünümünü açar ve izolasyon modu kaide ile temas gölgesini soluklaştırır; karşılaştırma modu iki organı yan yana gösterir ve geçerli organın görevi ile ölçeğine ilişkin ayrıntılar ekler.
Yükleme stratejisi · üç modellik önbellek ve önceden getirme
Varlık yöneticisi en son kullanılan üç organı tutar ve sürmekte olan yükleme isteklerini yeniden kullanır. Bir organın üzerine gelindiğinde veya organ odağa alındığında düşük öncelikli GLB önceden getirme başlatılır; organ değiştirildiğinde destekleyici görseller de tarayıcı önbelleğine alınır.
İşleme ve öğrenme · isteğe bağlı güncellemeler
Sürekli çalışan animasyon karesi döngüsü, render işlevini yalnızca etkileşim, animasyon veya durum değişikliği olduğunda çağırır; böylece hareketsiz sahne sürekli yeniden çizilmez. React arama, organ seçimi, karşılaştırma, ders ve test durumlarını yönetirken GSAP seçili içerik değiştiğinde hafif bir giriş animasyonu ekler.
