Auteur: The Bugged Dev
Essayer en direct À propos de ce projet
Anatomy Atelier réunit le cœur, le cerveau, les poumons, le foie, les reins, l’œil, l’intestin, le pancréas et la peau dans une bibliothèque consultable de neuf organes. Chaque entrée associe un spécimen 3D rotatif et zoomable à des points d’intérêt structurels, des faits clés et des cartes pédagogiques, ainsi qu’à des outils de coupe, de calques, d’isolation et de comparaison.
L’exploration se poursuit au-delà du modèle avec des leçons, de simples illustrations animées et des quiz. GLTFLoader et le décodeur Meshopt chargent chaque ressource, tandis qu’un cache de trois organes, le préchargement et le rendu à la demande assurent la fluidité des changements fréquents.
Points forts
- Recherchez et parcourez neuf organes : cœur, cerveau, poumons, foie, reins, œil, intestin, pancréas et peau.
- Faites glisser pour pivoter, utilisez la molette pour zoomer et sélectionnez les points d’intérêt pour lire les annotations structurelles, ou laissez la rotation automatique activée pour une vue continue.
- Utilisez les coupes pour examiner les structures internes, passez à une vue en calques filaires ou atténuez le socle et l’ombre de contact en mode isolation ; le mode comparaison place deux organes côte à côte.
- Passez des faits et cartes pédagogiques sur les organes aux leçons et quiz, afin de prolonger l’exploration libre par un apprentissage guidé.
Analyse technique
Ressources 3D · bibliothèque d’organes Tripo
Neuf organes sont fournis sous forme de ressources GLB individuelles dont les nœuds de scène et les matériaux portent des identifiants Tripo. GLTFLoader et le décodeur Meshopt chargent, mettent à l’échelle et centrent chaque organe dans un même espace de visualisation, afin que les points d’intérêt et les outils de la visionneuse partagent le même système de coordonnées.
Interaction de la visionneuse · commandes et points en espace écran
OrbitControls gère la rotation, le zoom et la rotation automatique. Les points d’intérêt utilisent une projection dans l’espace écran pour la sélection au pointeur, tandis que les tests de profondeur et d’orientation gèrent leur visibilité sans lancer de rayons répétés sur le maillage. Les plans de découpe produisent les coupes, un bouton en fil de fer révèle la vue en calques et l’isolation atténue le socle et l’ombre de contact ; le mode comparaison place deux organes côte à côte et ajoute des indications sur le rôle et les dimensions de l’organe actif.
Stratégie de chargement · cache de trois modèles et préchargement
Le gestionnaire de ressources conserve les trois organes les plus récemment utilisés et réutilise les requêtes de chargement en cours. Lorsqu’un organe est survolé ou reçoit le focus, un préchargement GLB à faible priorité est déclenché, tandis que le changement d’organe prépare aussi ses illustrations dans le cache du navigateur.
Rendu et apprentissage · mises à jour à la demande
La boucle d’animation permanente n’appelle le moteur de rendu qu’en cas d’interaction, d’animation ou de changement d’état ; une scène immobile n’est donc pas redessinée en continu. React gère la recherche, la sélection d’organes, la comparaison, les leçons et les quiz, tandis que GSAP ajoute une légère animation d’apparition au changement de contenu.
