Autore: The Bugged Dev
Provalo dal vivo Su questo progetto
Anatomy Atelier riunisce cuore, cervello, polmoni, fegato, reni, occhio, intestino, pancreas e pelle in una libreria consultabile di nove organi. Ogni voce combina un campione 3D ruotabile e ingrandibile con hotspot strutturali, fatti chiave e schede didattiche, oltre a strumenti per sezioni, livelli, isolamento e confronto tra organi.
L’esplorazione continua oltre il modello con lezioni, semplici illustrazioni animate e quiz. GLTFLoader e il decoder Meshopt caricano ogni risorsa, mentre una cache di tre organi, il precaricamento e il rendering su richiesta mantengono reattivi i passaggi frequenti.
Punti salienti
- Cerca e passa tra nove organi: cuore, cervello, polmoni, fegato, reni, occhio, intestino, pancreas e pelle.
- Trascina per ruotare, scorri per ingrandire e seleziona gli hotspot per leggere le note strutturali, oppure lascia attiva la rotazione automatica per una vista continua.
- Usa le sezioni per esaminare le strutture interne, passa a una vista a livelli wireframe o attenua il piedistallo e l’ombra di contatto in modalità isolamento; la modalità confronto affianca due organi.
- Passa dai fatti e dalle schede didattiche sugli organi a lezioni e quiz, estendendo l’esplorazione libera con uno studio guidato.
Analisi tecnica
Risorse 3D · libreria di organi Tripo
Nove organi sono forniti come singole risorse GLB, con nodi di scena e materiali contrassegnati da identificatori Tripo. GLTFLoader e il decoder Meshopt caricano, ridimensionano e centrano ogni organo nello stesso spazio di visualizzazione, così hotspot e strumenti del visualizzatore possono condividere lo stesso sistema di coordinate.
Interazione del visualizzatore · controlli e hotspot nello spazio dello schermo
OrbitControls gestisce rotazione, zoom e rotazione automatica. Gli hotspot usano la proiezione nello spazio dello schermo per la selezione tramite puntatore, mentre i test del buffer di profondità e dell’orientamento ne regolano la visibilità senza ripetuti raycast sulla mesh. I piani di ritaglio forniscono le sezioni, un interruttore wireframe espone la vista a livelli e l’isolamento attenua il piedistallo e l’ombra di contatto; la modalità confronto affianca due organi e aggiunge informazioni sul ruolo e sulle dimensioni dell’organo corrente.
Strategia di caricamento · cache di tre modelli e precaricamento
Il gestore delle risorse conserva i tre organi usati più di recente e riutilizza le richieste di caricamento in corso. Passando il puntatore su un organo o quando questo riceve il focus si avvia il precaricamento GLB a bassa priorità; cambiando organo vengono preparate nella cache del browser anche le relative illustrazioni.
Rendering e apprendimento · aggiornamenti su richiesta
Un ciclo di animazione permanente chiama il renderer solo in caso di interazione, animazione o cambiamento di stato, quindi una scena immobile non viene ridisegnata di continuo. React gestisce ricerca, selezione dell’organo, confronto, lezioni e quiz, mentre GSAP aggiunge una leggera animazione di comparsa quando cambia il contenuto selezionato.
