A indústria de AEC ainda busca seu lugar no #metaverso, mas encontrar a melhor maneira de usar modelos BIM neste ambiente não é uma tarefa fácil. Na ATBIM implementamos visualizadores web para aproveitar estes ativos digitais (modelos BIM) que nos parecem mais reais, acessíveis e fáceis... Por que, se fazemos todo o nosso trabalho em um ambiente web Por que não usar nossos modelos BIM na web?

Desta forma podemos continuar a explorar os ficheiros BIM, reutilizando a sua geometria e dados em contexto web, acessíveis de qualquer lugar e em qualquer dispositivo, sem software, sem licenças.

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

Atualmente, e numa percentagem muito elevada de casos, as empresas que trabalham com BIM utilizam imagens dos seus modelos para uma reunião ou explicação, mas por que não mostrar o projeto completo, como está?

Desta forma reduziremos o tempo de trabalho e agregaremos valor aos nossos clientes...
Poder “tocar” e explorar o seu projeto, de forma imersiva, aproxima-nos da realidade e proporciona aquela riqueza e frescura nos detalhes interessantes.

Para conseguir isso com sucesso, teremos que resolver os problemas relativos ao tamanho e peso dos arquivos BIM. Encontramos uma solução simples, viável e interessante que marcará um antes e um depois em nosso trabalho:

Usamos as bibliotecas Three.js e R3F (react-três-fibra). Three.js suporta uma ampla variedade de tipos de arquivos 3D, mas é recomendado usar glTF (um tipo de arquivo rápido que pode ser compactado em um arquivo muito compacto, ideal para modelos BIM).

reagir + três.js = reagir-três-fibra

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

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

Começamos exportando nosso arquivo rvt para fbx e depois passando-o para glTF. Depois que nosso modelo RVT tiver sido exportado e compactado para glTF, idealmente ele deverá ser convertido para GLB neste processo. O formato GLB armazena os dados internamente, o que torna o tamanho do arquivo consideravelmente menor... e isso é um grande ponto 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

Transformar o modelo BIM em um componente React reutilizável é fácil com o pacote gltfjsx. Esta ferramenta compila todas as informações do nosso modelo em um componente React reutilizável.

Se quiser experimentar seus próprios modelos, você pode usar o seguinte conversor:

https://gltf.pmnd.rs/

Você também pode usá-lo no terminal com o comando: 

npx gltfjsx modelo.gltf --transform 

(Para utilizá-lo, você deve ter o Node instalado em seu computador).

Este comando processa seu modelo por alguns segundos e retornará como saída um arquivo Model.jsx pronto para funcionar com React.

E é isso! 

Após este processo simples, você terá seu modelo pronto para implementá-lo na web. 

Aqui está um pequeno exemplo de código aberto para que você possa ver todo o potencial da ferramenta:

https://codesandbox.io/s/s006f

Conte-nos suas ideias sobre como implementar esta ferramenta em seus projetos! e se precisar de ajuda, não hesite em nos contatar em info@atbim.es!