ifc4all · Viewer 4D para Modelos IFC

Guia de Instalação

Do zero ao Visualizador IFC 4D rodando no seu computador. O OpenCode faz o trabalho técnico por você, em português: clona o projeto, instala tudo e sobe o servidor local.

⏱️ 15 a 25 minutos

💻 Windows ou Mac

🎓 Sem conhecimento prévio

🆓 100% gratuito

🗺️ Visão geral

O caminho, em 6 passos

Você instala o OpenCode, deixa ele clonar o projeto e preparar tudo, e abre o visualizador no navegador. O OpenCode cuida da parte técnica (Node.js, dependências, servidor).

Baixar OpenCode

Instalar o OpenCode Desktop — o assistente de IA que executa tudo.

Clonar o Projeto

Pedir ao OpenCode para clonar o ifc4all do GitHub no seu computador.

Instalar Dependências

O OpenCode analisa o projeto, instala o que falta e sobe o servidor (localhost:5173).

Como usar

Carregar um modelo IFC e navegar no 3D + cronograma Gantt.

Solução de problemas

O que fazer se algo não funcionar.

＋

Alternativa gratuita de IA (NVIDIA)

Gerar uma chave de API grátis na NVIDIA para usar no OpenCode.

Passo 1 de 5

Baixar o OpenCode

O OpenCode é o assistente de IA que vai fazer todo o trabalho técnico. Você só precisa instalá-lo — ele mesmo cuida do resto (Node.js, dependências, servidor).

Acesse https://opencode.ai

Clique em Download e escolha a versão do seu sistema: Windows ou Mac

Abra o arquivo baixado e siga a instalação. No Windows, se aparecer "O Windows protegeu seu PC", clique em Mais informações → Executar mesmo assim.

Abra o OpenCode. Ele tem uma caixa de chat na parte de baixo — é ali que você cola os pedidos em português.

💡

Não precisa instalar o Node.js manualmente. Se o projeto precisar dele, o OpenCode instala para você no Passo 3.

Passo 2 de 5

Clonar o Projeto

Em vez de baixar um ZIP, o OpenCode clona o repositório direto do GitHub para o seu computador.

No OpenCode, vá em File → Open Folder e escolha onde salvar o projeto (ex.: pasta Documentos).

Cole o prompt abaixo na caixa de chat do OpenCode e aperte Enter.

PROMPTClonar no OpenCode

Clone o repositório https://github.com/bicalhobim/ifc4all nesta pasta. Se o Git não estiver instalado, instale-o primeiro e depois clone. Ao terminar, me mostre a estrutura de pastas do projeto.

↑

Quando o OpenCode pedir permissão para executar comandos, clique em Allow (Permitir). Aguarde 1 a 3 minutos.

✓

Resultado esperado: uma pasta ifc4all com as subpastas viewer/, ifc_model/, etc.

Passo 3 de 5

Instalar Dependências e Rodar

Agora o OpenCode analisa o projeto (a partir do arquivo AGENTS.md), instala e atualiza tudo que for necessário, e sobe o visualizador em localhost:5173.

No OpenCode, vá em File → Open Folder e abra a pasta ifc4all que acabou de ser clonada.

Cole o prompt abaixo na caixa de chat e aperte Enter. Ele manda o OpenCode montar e executar o plano completo de instalação.

PROMPTPreparar e rodar o ifc4all

Leia o arquivo agente.md deste projeto e crie um plano passo a passo para deixar o ifc4all rodando plenamente em modo local (localhost:5173).

Depois, execute o plano do começo ao fim:
1. Verifique se o Node.js e o npm estão instalados e atualizados (versão LTS ou superior). Se não estiverem, instale/atualize antes de continuar.
2. Analise as bibliotecas e configurações atuais do projeto na pasta viewer (package.json, package-lock.json, node_modules e vite.config.ts). Respeite o lockstep de versões descrito no AGENTS.md: @thatopen/components ^3.4, @thatopen/fragments ~3.4, three >=0.182 e web-ifc 0.0.77.
3. Entre na pasta viewer e rode npm install para instalar todas as dependências. Se der conflito de peer deps, apague node_modules e package-lock.json e rode npm install de novo.
4. Confirme que o WASM_PATH em src/ifc/app.ts bate com a versão do web-ifc instalada (web-ifc 0.0.77).
5. Rode npm run dev dentro de viewer para subir o servidor na porta 5173.
6. Me avise quando estiver rodando e me diga o endereço para abrir no navegador.

Sempre que precisar de permissão para instalar algo ou rodar comandos, peça e siga em frente. No final, garanta que o app abre sem erros em http://localhost:5173.

↑

Clique em Allow (Permitir) sempre que o OpenCode pedir. Na primeira vez pode demorar alguns minutos (instala Node, dependências e baixa componentes).

✅

Quando o OpenCode avisar que está rodando, abra o Chrome, Edge ou Firefox e acesse: http://localhost:5173

🧭 Passo 4 · Como usar

Carregar modelo IFC e navegar

1. Carregar o arquivo IFC

Com o visualizador aberto (http://localhost:5173), clique em "Carregar arquivo" ou arraste um .ifc para a janela.

Use o modelo de exemplo TORRE02_ESTRUTURA_4D.ifc, que está na pasta ifc4all/ifc_model/ do projeto.

Aguarde o processamento — o modelo 3D aparece e o cronograma Gantt é gerado automaticamente na parte inferior.

💡

Dica: você também pode arrastar e soltar o arquivo .ifc direto na janela — é mais rápido.

2. Navegar no modelo 3D e no cronograma

AçãoComo fazer

Rotacionar o modeloClique e arraste com o botão esquerdo

ZoomScroll do mouse

Mover a câmeraBotão direito + arraste

Selecionar elementoClique nele no modelo 3D ou na árvore espacial

Navegar cronogramaArraste o scrubber (barra de tempo) no Gantt

Ver o 4DAo mover o scrubber, elementos que ainda não começaram ficam ocultos

🔧 Passo 5 · Solução de problemas

Se algo não funcionar

⚠️

"O Gantt aparece vazio (0 elementos com cronograma)"
O arquivo IFC precisa ter os atributos StartDate e FinishDate nos PSets dos elementos. Use um IFC pré-processado com esses atributos (como o modelo de exemplo).

⚠️

"Erro ao carregar o modelo"
Verifique a conexão com a internet — o WASM do web-ifc e o worker de fragments são baixados online na inicialização.

⚠️

"npm install dá erro de conflito de versões"
Peça ao OpenCode: "Delete a pasta node_modules e o arquivo package-lock.json, depois rode npm install dentro de viewer". As versões do That Open são travadas em lockstep (3.x).

⚠️

"Porta 5173 já está em uso"
Peça ao OpenCode: "Mude a porta do dev server para 5174" ou encerre o processo que está usando a 5173.

⚠️

"Erro de WASM / web-ifc"
Peça ao OpenCode: "Confirme que o WASM_PATH em src/ifc/app.ts aponta para a mesma versão do web-ifc instalada (0.0.77)".

＋ Alternativa gratuita de IA

Usar modelos gratuitos da NVIDIA no OpenCode

Se você não quiser usar um provedor pago, dá para gerar uma chave de API gratuita na NVIDIA (NVIDIA API Catalog / "build") e usá-la como provedor no OpenCode, com modelos abertos e bons para desenvolvimento web.

1. Criar a conta e a chave

Acesse https://build.nvidia.com e faça login (ou crie uma conta gratuita).

Escolha um modelo no catálogo (ex.: um modelo de código como Qwen2.5-Coder, Llama 3.x ou DeepSeek). Clique no modelo para abrir a página dele.

Clique em "Get API Key" (ou Generate API Key). Copie a chave gerada — ela começa com nvapi-.

Guarde a chave em local seguro. Ela dá acesso gratuito a uma cota mensal de uso dos modelos.

🔒

Nunca compartilhe sua chave nvapi-... nem a coloque em código público. Trate como uma senha.

2. Configurar no OpenCode Desktop

A NVIDIA expõe uma API compatível com o padrão OpenAI, então basta apontar o OpenCode para o endpoint da NVIDIA. A forma mais simples é pedir ao próprio OpenCode:

PROMPTConfigurar provedor NVIDIA

Quero configurar um provedor gratuito de IA no OpenCode usando a API da NVIDIA (build.nvidia.com), que é compatível com o padrão OpenAI.

Dados:
- Base URL: https://integrate.api.nvidia.com/v1
- API Key: nvapi-COLE_SUA_CHAVE_AQUI
- Modelo sugerido: qwen/qwen2.5-coder-32b-instruct

Configure esse provedor como um provider compatível com OpenAI no OpenCode (no arquivo de configuração do OpenCode, opencode.json / config), defina a variável de ambiente da chave e selecione esse modelo como ativo. Depois confirme que está funcionando fazendo um teste simples.

⚙️

Não conseguiu configurar pelo chat? Cadastre manualmente:
Se o OpenCode não conseguir fazer sozinho pelo comando acima, adicione o provedor na mão:

No OpenCode, abra as configurações de provedores/modelos (ou edite o arquivo opencode.json).
Adicione um provedor do tipo OpenAI-compatible.
Em Base URL, cole: https://integrate.api.nvidia.com/v1
Em API Key, cole a sua chave nvapi-...
Em Modelo, escolha um da tabela abaixo (ex.: qwen/qwen2.5-coder-32b-instruct) e defina como ativo.
Salve e faça um teste simples no chat para confirmar que respondeu.

3. Escolher um bom modelo gratuito para web app

ModeloBom para

qwen/qwen2.5-coder-32b-instructProgramação em geral, HTML/CSS/JS — ótimo custo-benefício para web app

deepseek-ai/deepseek-r1Raciocínio e depuração de problemas mais complexos

meta/llama-3.3-70b-instructUso geral, instruções em português, boa qualidade

💡

Para construir e ajustar telas de web app (o caso do ifc4all e do hackathon), comece com o Qwen2.5-Coder. Se travar em algo mais difícil, troque para o DeepSeek-R1.

← Voltar à jornada do hackathon