Autor: The Bugged Dev
Experimente ao vivo Sobre este projeto
O Anatomy Atelier reúne coração, cérebro, pulmões, fígado, rins, olho, intestino, pâncreas e pele em uma biblioteca pesquisável com nove órgãos. Cada item combina um espécime 3D que pode ser girado e ampliado com pontos estruturais, fatos importantes e cartões de aprendizagem, além de ferramentas para cortes, camadas, isolamento e comparação de órgãos.
A exploração continua além do modelo com aulas, ilustrações animadas simples e questionários. O GLTFLoader e o decodificador Meshopt carregam cada recurso, enquanto um cache de três órgãos, o pré-carregamento e a renderização sob demanda mantêm rápidas as trocas frequentes.
Destaques
- Pesquise e alterne entre nove órgãos: coração, cérebro, pulmões, fígado, rins, olho, intestino, pâncreas e pele.
- Arraste para girar, role para ampliar e selecione pontos interativos para ver notas estruturais, ou deixe a rotação automática ativa para uma visualização contínua.
- Use cortes para examinar estruturas internas, alterne para uma visualização em camadas com wireframe ou atenue o pedestal e a sombra de contato no modo de isolamento; o modo de comparação coloca dois órgãos lado a lado.
- Passe dos fatos e cartões de aprendizagem sobre os órgãos para aulas e questionários, ampliando a exploração livre com estudo guiado.
Análise técnica
Recursos 3D · biblioteca de órgãos Tripo
Nove órgãos são fornecidos como recursos GLB individuais, cujos nós de cena e materiais têm identificadores Tripo. O GLTFLoader, junto com o decodificador Meshopt, carrega, dimensiona e centraliza cada órgão no mesmo espaço de visualização, permitindo que os pontos interativos e as ferramentas do visualizador compartilhem o mesmo sistema de coordenadas.
Interação do visualizador · controles e pontos no espaço da tela
O OrbitControls gerencia rotação, zoom e rotação automática. Os pontos interativos usam projeção no espaço da tela para a seleção com o ponteiro, enquanto testes de buffer de profundidade e orientação controlam a visibilidade sem raycasts repetidos na malha. Planos de recorte fornecem cortes, um controle de wireframe revela a visualização em camadas e o isolamento atenua o pedestal e a sombra de contato; o modo de comparação coloca dois órgãos lado a lado e acrescenta detalhes sobre a função e a escala do órgão atual.
Estratégia de carregamento · cache de três modelos e pré-carregamento
O gerenciador de recursos mantém os três órgãos usados mais recentemente e reutiliza solicitações de carregamento em andamento. Ao passar o ponteiro sobre um órgão ou quando ele recebe foco, inicia-se o pré-carregamento do GLB com baixa prioridade; ao trocar de órgão, as ilustrações relacionadas também são preparadas no cache do navegador.
Renderização e aprendizagem · atualizações sob demanda
Um ciclo permanente de quadros de animação chama o renderizador apenas em caso de interação, animação ou mudança de estado, portanto uma cena parada não é redesenhada continuamente. O React gerencia pesquisa, seleção de órgãos, comparação, aulas e questionários, enquanto o GSAP adiciona uma leve animação de entrada quando o conteúdo selecionado muda.
