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).
1
Baixar OpenCode
Instalar o OpenCode Desktop — o assistente de IA que executa tudo.
2
Clonar o Projeto
Pedir ao OpenCode para clonar o ifc4all do GitHub no seu computador.
3
Instalar Dependências
O OpenCode analisa o projeto, instala o que falta e sobe o servidor (localhost:5173).
4
Como usar
Carregar um modelo IFC e navegar no 3D + cronograma Gantt.
5
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.
1
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.
2
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.3
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
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.
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).
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.
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)".
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:
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 appdeepseek-ai/deepseek-r1Raciocínio e depuração de problemas mais complexosmeta/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.