A indústria AEC continua buscando seu lugar no #metaverso, mas encontrar a melhor maneira de utilizar os modelos BIM neste ambiente não é tarefa fácil. Na ATBIM implementamos visualizadores web para tirar proveito destes ativos digitais (modelos BIM) que nos parece mais real, acessível e fácil... Porque, se todo nosso trabalho fazemos em ambiente web por que não usar nossos modelos BIM na web?

Assim podemos seguir explorando os arquivos BIM, reutilizando sua geometria e dados no contexto web, acessível de qualquer lugar e dispositivo, sem software, sem licenças..

..e as possibilidades são infinitas, desde um simples visualizador de modelos 3D para que toda a equipe possa acessar este modelo sem a necessidade de utilizar softwares como REVIT ou Navisworks, até a gamificação do projeto, a animação com física, a virtualização (VR), os NFTs, blockchain...

Atualmente, e em uma % muito alta dos casos, as empresas que trabalham com BIM utilizam imagens de seus modelos para uma reunião ou explicação, mas por que não mostrar o projeto completo, tal qual?

Desta forma reduziremos o tempo de trabalho e adicionaremos valor aos nossos clientes...
Poder "tocar" e explorar seu projeto, de forma imersiva, nos aproxima da realidade e aporta essa riqueza e frescor nos detalhes interessantes.

Para consegui-lo com sucesso, deveremos solucionar os problemas referentes ao tamanho e peso dos arquivos BIM. Encontramos uma solução simples, viável e empolgante que marcará um antes e depois nos nossos trabalhos:

Utilizamos as bibliotecas Three.js e R3F (react-three-fiber). Three.js admite uma ampla gama de tipos de arquivos 3D, mas é recomendável utilizar glTF (um tipo de arquivo rápido que pode ser comprimido em um arquivo muito compacto, ideal para modelos BIM).

react + three.js = react-three-fiber

O Three.js permite renderizar gráficos na web, enquanto o React Three Fiber é uma biblioteca que abstrai um pouco mais o processo de implementação de Three.js e nos permite desenvolver aplicações web com um código mais fácil e simples de trabalhar.
Em resumo, o Three.js é uma biblioteca de gráficos em 3D independente que se utiliza para criar conteúdo 3D na web, enquanto o React Three Fiber é uma biblioteca baseada em Three.js que se utiliza para integrar conteúdo 3D em aplicações de React.

Convertendo o modelo BIM em um componente React reutilizável:

Começamos exportando nosso arquivo rvt para fbx para depois passar para glTF. Uma vez que se exportou e comprimiu nosso modelo RVT para glTF, o ideal é convertê-lo em GLB neste processo. O formato GLB armazena os dados internamente, o que faz com que o tamanho do arquivo seja consideravelmente menor... e este é um ponto muito a nosso favor já que normalmente trabalhamos com modelos BIM de geometria complexa e grande tamanho.

Ciclo de conversão de um modelo .rvt para gltfjsx

Converter o modelo BIM em um componente React reutilizável é fácil com o pacote gltfjsx. Esta ferramenta compila toda a informação do nosso modelo em um componente React reutilizável.

Se desejas testar com seus próprios modelos, podes utilizar o seguinte conversor:

https://gltf.pmnd.rs/

Também podes usá-lo no terminal com o comando:

npx gltfjsx model.gltf --transform

(Para usá-lo, deves ter instalado Node no teu computador).

Este comando processa teu modelo por uns segundos e te devolverá como saída um arquivo Model.jsx pronto para trabalhar com React.

E pronto!

Depois deste processo simples, terás teu modelo pronto para implementá-lo na web.

Aqui tens um pequeno exemplo open source para que possas ver todo o potencial da ferramenta:

https://codesandbox.io/s/s006f

Conta-nos suas ideias de como implementar esta ferramenta nos seus projetos! E se precisas de ajuda, não hesites em consultar-nos em info@atbim.es!