Recentemente comecei a migrar do Autodesk Fusion 360 para o FreeCAD, um software open source de modelagem paramétrica. Paralelamente, estou construindo este blog integrado com um sistema PKM em Markdown usando Obsidian. Uma das entidades que mantenho lá é o TIL (Today I Learned), onde documento o que vou aprendendo — e já tinha criado alguns posts sobre FreeCAD usando prints estáticos.
Enquanto estudava, li sobre o formato GLTF: super otimizado e perfeito para web. Foi aí que tive a ideia: e se eu pudesse renderizar os modelos 3D diretamente aqui no blog, ao invés de apenas prints?
Aproveitei para testar o React Three Fiber (abstração do ThreeJS para React) com arquivos GLTF, algo que estava querendo experimentar há um tempo. O resultado é o componente abaixo, que carrega e renderiza modelos 3D diretamente no MDX.
O que esse viewer faz
- Sistema de abas para alternar entre modos de visualização:
- wireframe - Visualização em wireframe verde, seguindo o estilo minimalista/hacker do blog
- solid - Material padrão com iluminação
- material - Aba opcional que aparece quando um preset de material é especificado (metal, plastic, glass, gold, copper)
- Rotação automática do modelo
- Botão de cadeado para habilitar/desabilitar interação com o modelo (arrastar para rotacionar)
- Presets de câmera: isométrica (CAD) ou perspectiva (orgânico)
Próximos passos
Estou pesquisando formas de exportar arquivos do FreeCAD via linha de comando. A ideia é versionar apenas os arquivos originais .FCStd no repositório e automatizar a exportação do GLTF via pipeline quando houver alterações.
Também pretendo evoluir o viewer: melhorar os controles de zoom e pan, e quem sabe no futuro permitir alteração de variáveis paramétricas do CAD diretamente no browser.
Para detalhes técnicos da implementação (stack, estrutura dos componentes, problemas com SSR, etc), veja o TIL: React Three Fiber + GLTF + MDX.