Autor: The Bugged Dev
Live ausprobieren Über dieses Projekt
Anatomy Atelier vereint Herz, Gehirn, Lunge, Leber, Nieren, Auge, Darm, Bauchspeicheldrüse und Haut in einer durchsuchbaren Bibliothek mit neun Organen. Jeder Eintrag kombiniert ein dreh- und zoombares 3D-Präparat mit Struktur-Hotspots, wichtigen Fakten und Lernkarten sowie Werkzeugen für Querschnitte, Ebenen, Isolation und Organvergleiche.
Die Erkundung geht mit Lektionen, einfachen animierten Illustrationen und Quizfragen über das Modell hinaus. GLTFLoader und der Meshopt-Decoder laden jedes Asset; ein Cache für drei Organe, Prefetching und Rendering nach Bedarf halten häufige Wechsel reaktionsschnell.
Highlights
- Suchen und wechseln Sie zwischen neun Organen: Herz, Gehirn, Lunge, Leber, Nieren, Auge, Darm, Bauchspeicheldrüse und Haut.
- Ziehen Sie zum Drehen, scrollen Sie zum Zoomen und wählen Sie Hotspots für Strukturhinweise aus – oder lassen Sie die automatische Drehung für eine kontinuierliche Ansicht aktiviert.
- Nutzen Sie Querschnitte, um innere Strukturen zu untersuchen, wechseln Sie zur Drahtgitter-Ebenenansicht oder blenden Sie im Isolationsmodus Sockel und Kontaktschatten ab; der Vergleichsmodus stellt zwei Organe nebeneinander.
- Wechseln Sie von Organfakten und Lernkarten zu Lektionen und Quizfragen und erweitern Sie das freie Erkunden durch angeleitetes Lernen.
Technische Analyse
3D-Assets · Tripo-Organbibliothek
Neun Organe werden als einzelne GLB-Assets geliefert, deren Szenenknoten und Materialien Tripo-Kennzeichnungen tragen. GLTFLoader lädt, skaliert und zentriert zusammen mit dem Meshopt-Decoder jedes Organ in einem gemeinsamen Ansichtsraum, sodass Hotspots und Viewer-Werkzeuge dasselbe Koordinatensystem nutzen können.
Viewer-Interaktion · Steuerung und Hotspots im Bildschirmraum
OrbitControls übernimmt Drehung, Zoom und automatische Rotation. Hotspots verwenden die Projektion in den Bildschirmraum für die Zeigerauswahl, während Tiefenpuffer- und Ausrichtungstests die Sichtbarkeit ohne wiederholte Raycasts auf das Mesh steuern. Clipping-Ebenen erzeugen Querschnitte, ein Drahtgitter-Schalter zeigt die Ebenenansicht, und die Isolation blendet Sockel und Kontaktschatten ab; der Vergleichsmodus stellt zwei Organe nebeneinander und ergänzt Angaben zu Funktion und Größe des aktuellen Organs.
Ladestrategie · Cache für drei Modelle und Prefetch
Der Asset-Manager hält die drei zuletzt verwendeten Organe vor und verwendet laufende Ladeanfragen erneut. Beim Überfahren oder Fokussieren eines Organs startet ein GLB-Prefetch mit niedriger Priorität; beim Wechsel des Organs werden außerdem die zugehörigen Illustrationen im Browser-Cache vorgewärmt.
Rendering und Lernen · Aktualisierung nach Bedarf
Eine ständig laufende Animationsschleife ruft den Renderer nur bei Interaktionen, Animationen oder Zustandsänderungen auf, sodass eine ruhende Szene nicht fortlaufend neu gezeichnet wird. React verwaltet Suche, Organauswahl, Vergleich, Lektionen und Quizfragen, während GSAP beim Wechsel des ausgewählten Inhalts eine leichte Einblendanimation hinzufügt.
