Uma jornada de barco em 3D por um vale fluvial japonês, direto no navegador e renderizada em tempo real com three.js, em quatro estações e a qualquer hora do dia.
935JavaScriptOtherAtualizado ontem
lhlGitHub/threejs-architecture-effects
Uma Agent Skill que permite ao Codex, Claude Code ou Cursor gerar uma cena arquitetônica em Three.js, orbitável e montada tijolo por tijolo.
- Estrelas
- 587
- Forks
- 69
- Issues abertas
- 0
- Último commit
- há 28 dias
O que é?
Este projeto é uma Agent Skill que orienta um agente de programação com IA a criar um edifício interativo de estilo chinês em 3D com Three.js. O resultado é um site executável com Vite + React + Three.js, no qual uma miniatura sólida se monta ao longo de uma única timeline de 0 a 1. Assim, você pode iniciar, pausar, voltar na timeline e reproduzir a construção novamente. As peças incluem fiadas de tijolos, estrutura de madeira, suportes dougong, beirais em camadas e telhas de cerâmica.
Materiais como tijolo, madeira, reboco, telha, pedra e bronze são gerados proceduralmente, sem carregar modelos pagos. O projeto inclui controles de órbita e zoom, além de câmeras para ver detalhes dos beirais e dos leões de pedra. Um script de scaffold copia o starter incluído para um novo diretório sem sobrescrever arquivos existentes, e o starter é executado com npm ci e npm run dev em um navegador com WebGL2.
A torre do relógio incluída é um exemplo, não uma reconstrução histórica. A skill também foi pensada para outros projetos, como um pavilhão de dois andares, e não inclui exportação de vídeo.
Recursos principais
- 01Gera um edifício sólido e orbitável em Three.js, em vez de um vídeo plano
- 02A construção é controlada por uma única timeline de 0 a 1, com opções para iniciar, pausar, percorrer e reproduzir novamente
- 03Materiais PBR procedurais para tijolo, madeira, reboco, telha, pedra e bronze
- 04Câmeras para ver de perto os beirais e os leões de pedra
- 05O script de scaffold copia um starter com Vite + React sem sobrescrever pastas existentes
Casos de uso
- Orientar um agente de programação com IA a criar uma cena de pavilhão ou edifício chinês em Three.js
- Criar uma apresentação interativa de arquitetura com animação de construção andar por andar
- Adaptar o template inicial para outro projeto, como um pavilhão à beira de um lago
Início rápido
- 1
Clone o repositório
git clone https://github.com/lhlGitHub/threejs-architecture-effects.git - 2
Crie um novo projeto a partir do starter
node threejs-architecture-effects/scripts/scaffold.mjs ./my-building - 3
Instale as dependências e inicie o servidor de desenvolvimento
npm ci && npm run dev
Antes de usar
- Requer Node.js 22.13 ou superior e um navegador compatível com WebGL2.
- É voltado para desktop; o README não afirma que funcione sem problemas em todos os dispositivos.
- A exportação de vídeo não está incluída; o resultado é um site interativo.
Tópicos
Perguntas frequentes
- O que é threejs-architecture-effects?
- Uma Agent Skill que permite ao Codex, Claude Code ou Cursor gerar uma cena arquitetônica em Three.js, orbitável e montada tijolo por tijolo. Este projeto é uma Agent Skill que orienta um agente de programação com IA a criar um edifício interativo de estilo chinês em 3D com Three.js. O resultado é um site executável com Vite + React + Three.js, no qual uma miniatura sólida se monta ao longo de uma única timeline de 0 a 1. Assim, você pode iniciar, pausar, voltar na timeline e reproduzir a construção novamente. As peças incluem fiadas de tijolos, estrutura de madeira, suportes dougong, beirais em camadas e telhas de cerâmica.
- threejs-architecture-effects é gratuito? Qual é a licença?
- threejs-architecture-effects é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
- threejs-architecture-effects ainda é mantido?
- Manutenção ativa. O último commit de threejs-architecture-effects foi em 22 de set. de 2026.
- Para que posso usar threejs-architecture-effects?
- Orientar um agente de programação com IA a criar uma cena de pavilhão ou edifício chinês em Three.js Criar uma apresentação interativa de arquitetura com animação de construção andar por andar Adaptar o template inicial para outro projeto, como um pavilhão à beira de um lago
- Como instalar threejs-architecture-effects?
- Clone o repositório: git clone https://github.com/lhlGitHub/threejs-architecture-effects.git Crie um novo projeto a partir do starter: node threejs-architecture-effects/scripts/scaffold.mjs ./my-building Instale as dependências e inicie o servidor de desenvolvimento: npm ci && npm run dev
- Onde consigo threejs-architecture-effects?
- O código-fonte e as instruções de instalação estão no GitHub: https://github.com/lhlGitHub/threejs-architecture-effects
Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.
Projetos relacionados
Coleção de componentes auxiliares e hooks prontos para criar cenas 3D com react-three-fiber.
10 mil853JavaScriptMITAtualizado ontem
Catálogo open source sem login de componentes interativos de UI com Three.js/WebGL, renderização ao vivo e código-fonte completo em React.
6,7 mil628HTMLMITAtualizado há 2 meses
Um wrapper React para a biblioteca postprocessing que permite aplicar efeitos de pós-processamento a cenas do react-three-fiber de forma declarativa, usando componentes JSX.
1,4 mil141TypeScriptMITAtualizado ontem
Reconstrói um objeto a partir de uma imagem de referência em código procedural TypeScript para Three.js, pronto para animação, e não em um arquivo de malha.
18,4 mil1,7 milPythonApache-2.0Atualizado há 3 dias
Guia de campo interativo em 3D com 63 espécies de insetos modeladas proceduralmente no navegador usando TypeScript e Three.js, sem arquivos de modelo.
79373TypeScriptMITAtualizado há 3 dias