Dando Vida a um Livro Didático de Biologia com React e Three.js

Lembra daqueles diagramas de células entediantes nos livros didáticos da escola? Imagens planas com um monte de setas, onde as mitocôndrias parecem pantufas e o núcleo é apenas um círculo comum. Em algum momento você percebe que imagens estáticas simplesmente não transmitem como tudo está organizado em três dimensões. O desenvolvedor cclank resolveu esse problema criando o Cell Architecture Studio. É uma galeria interativa que transforma o estudo da citologia em explorar modelos 3D diretamente no navegador.

O que é

O projeto é um estúdio interativo onde você pode examinar sete tipos de células: de neurônios e bactérias a células vegetais e leucócitos. Não é apenas um visualizador de arquivos 3D. O autor construiu uma interface completa de aplicativo educacional com descrições detalhadas dos organelos, modos de comparação e até os fundamentos de um tutor com IA.

Por que devemos nos importar, como desenvolvedores? Primeiro, é um ótimo exemplo de como combinar React 19 com gráficos pesados do Three.js. Segundo, há uma implementação interessante de testes visuais aqui. Se você já quebrou uma cena 3D após atualizar estilos, encontrará algo vale a pena olhar no código-fonte.

O que o estúdio pode fazer

O aplicativo tem vários recursos que o diferenciam de cenas demo comuns.

Detalhes e modos de visualização

Os modelos mais detalhados são a célula vegetal e o leucócito. Eles carregam em formato GLB com texturas nativas preservadas. Existem dois modos principais:

1. Mesh: visualização padrão do modelo com todos os detalhes.
2. Focus: um modo que destaca organelos específicos, removendo ruído visual desnecessário. Isso é útil quando você precisa estudar, digamos, apenas o complexo de Golgi.

Interface inteligente

O projeto inclui um Tutor com IA. Por enquanto é mais um conceito com prompts pré-escritos e rastreamento de progresso, mas mostra a direção para onde o software educacional está indo. Há um painel de comparação onde você pode comparar a estrutura de diferentes células, e cartões de metadados detalhados para cada objeto.

3D responsivo

Desenvolvedores frequentemente têm dificuldades para encaixar o Canvas em layouts mobile. Aqui, três variantes de layout são implementadas: desktop, compacto e mobile. E isso não é apenas testado "a olho" — é verificado com capturas de tela automatizadas.

Stack técnica por trás

O projeto é construído em uma stack moderna, sem código legado:

• React 19 e TypeScript: a base mais recente.
• Vite: para builds rápidos.
• Three.js + React Three Fiber (R3F): o padrão de fato para 3D na web.
• Drei: uma biblioteca auxiliar para R3F que cuida do trabalho rotineiro como carregar modelos.
• Playwright Core: usado para verificação visual.

Ponto interessante: se o usuário tem internet lenta e um modelo GLB pesado ainda não terminou de baixar, o aplicativo não trava nem mostra uma tela em branco. Em vez disso, um fallback procedural entra em ação — geometria simplificada é gerada com Three.js puro enquanto os ativos principais carregam.

Como verificar a integridade visual

Normalmente os testes verificam lógica, mas em projetos 3D é importante que a imagem não "derive". Há um script verify.mjs no repositório. Ele inicia o Playwright, tira capturas de tela em diferentes resoluções e compara métricas de pixels no Canvas. Isso permite capturar bugs quando um modelo falha ao renderizar ou a UI sobrepõe controles importantes.

Para executar a verificação você mesmo:

1. Inicie um servidor local: npm run dev
2. Em outro terminal, execute: npm run verify

O script vai verificar a renderização da célula vegetal, leucócito e funcionalidade de janela modal. Este é um bom exemplo de como automatizar QA em aplicativos gráficos.

Quem deveria explorar este projeto

Eu recomendaria olhar o código em dois casos. Se você está apenas começando a trabalhar com React Three Fiber, pode pegar a estrutura correta de componentes e manipulação de eventos dentro da cena. E se você está trabalhando em projetos de EdTech, o Cell Architecture Studio é uma referência pronta para como um livro didático digital moderno deveria parecer.

Claro, o projeto ainda está em status de protótipo. Nem todas as células têm modelos de alta qualidade prontos, e a documentação é concisa em alguns lugares. Mas como base para uma plataforma educacional ou um exemplo de integração de 3D complexo em um aplicativo React — este é um trabalho muito sólido.

Você pode experimentar a demo ao vivo aqui, e o código-fonte está no repositório do cclank.