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.
58769TypeScriptMITAtualizado há 29 dias
billpwchan/sakura-fantasy
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.
- Estrelas
- 98
- Forks
- 6
- Issues abertas
- 1
- Último commit
- ontem
O que é?
Sakura Fantasy é uma cena interativa em tempo real na qual você navega em um barco fluvial com teto de palha por um vale japonês. O trajeto passa por alamedas de cerejeiras, uma ponte vermelha de tambor, uma vila sob um pagode de cinco andares, um desfiladeiro de bambu, um túnel de portais torii e um lago. A vegetação é criada a partir de escaneamentos de fotogrametria de plantas japonesas reais, e a iluminação acompanha o sol ao longo do dia, com cinco condições climáticas: céu limpo, neblina, chuva, tempestade e neve.
A trilha sonora é gerada durante a viagem, com koto, shakuhachi e shō em modos japoneses, combinados a gravações de campo de sinos de templos e sons de jardins de Kyoto, posicionadas conforme o local, a estação e a hora. A base de código tem cerca de 10.000 linhas de JavaScript puro sobre three.js, sem engine de jogos nem framework. Os visitantes podem controlar o barco, mudar a estação, a hora e o clima, alternar os modos de câmera e exportar fotos; parâmetros na URL permitem abrir qualquer cena diretamente.
O projeto inclui uma etapa de build que gera um site estático, e os assets estão no repositório.
Recursos principais
- 01Vale procedural com plantas criadas a partir de fotogrametria e mudanças sazonais.
- 02Sol, céu e neblina dinâmicos, além de cinco condições climáticas.
- 03Reflexos na água, rastros do barco, espuma e pétalas renderizados em tempo real.
- 04Trilha sonora generativa ao vivo, com instrumentos japoneses e gravações posicionadas conforme o local.
- 05Controles pelo teclado, vários modos de câmera e modo de fotografia em PNG.
- 06Parâmetros na URL para ir direto a qualquer estação, hora, condição climática ou posição.
Casos de uso
- Estudar técnicas de renderização WebGL em tempo real com three.js.
- Explorar a geração procedural de mundos e o streaming de nível de detalhe no navegador.
- Usar o projeto como referência para áudio generativo com a Web Audio API.
- Contemplar uma cena 3D interativa e atmosférica como experiência independente.
Início rápido
- 1
Clone o repositório
git clone https://github.com/billpwchan/sakura-fantasy.git - 2
Acesse a pasta do projeto
cd sakura-fantasy - 3
Instale as dependências
npm install - 4
Inicie o servidor de desenvolvimento e abra http://127.0.0.1:5190
npm run dev
Antes de usar
- O campo de licença está listado como NOASSERTION. O README informa que o código é MIT e que as licenças dos recursos estão listadas individualmente em CREDITS.md; confira esses termos antes de reutilizá-los.
- Celulares e tablets recebem uma versão quick tier reduzida. Os números de desempenho do README foram obtidos com um Apple M4 Max de alto desempenho.
Tópicos
Perguntas frequentes
- O que é sakura-fantasy?
- 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. Sakura Fantasy é uma cena interativa em tempo real na qual você navega em um barco fluvial com teto de palha por um vale japonês. O trajeto passa por alamedas de cerejeiras, uma ponte vermelha de tambor, uma vila sob um pagode de cinco andares, um desfiladeiro de bambu, um túnel de portais torii e um lago. A vegetação é criada a partir de escaneamentos de fotogrametria de plantas japonesas reais, e a iluminação acompanha o sol ao longo do dia, com cinco condições climáticas: céu limpo, neblina, chuva, tempestade e neve.
- sakura-fantasy é gratuito? Qual é a licença?
- sakura-fantasy é open source sob a licença Other. Confira os termos da licença antes de usá-lo em produtos comerciais.
- sakura-fantasy ainda é mantido?
- Manutenção ativa. O último commit de sakura-fantasy foi em 19 de out. de 2026.
- Para que posso usar sakura-fantasy?
- Estudar técnicas de renderização WebGL em tempo real com three.js. Explorar a geração procedural de mundos e o streaming de nível de detalhe no navegador. Usar o projeto como referência para áudio generativo com a Web Audio API. Contemplar uma cena 3D interativa e atmosférica como experiência independente.
- Como instalar sakura-fantasy?
- Clone o repositório: git clone https://github.com/billpwchan/sakura-fantasy.git Acesse a pasta do projeto: cd sakura-fantasy Instale as dependências: npm install Inicie o servidor de desenvolvimento e abra http://127.0.0.1:5190: npm run dev
- Onde consigo sakura-fantasy?
- O código-fonte e as instruções de instalação estão no GitHub: https://github.com/billpwchan/sakura-fantasy
Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.
Projetos relacionados
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
Coleção de componentes auxiliares e hooks prontos para criar cenas 3D com react-three-fiber.
10 mil853JavaScriptMITAtualizado anteontem
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