Uma floresta em three.js para você passear, aqui mesmo na página: colinas, um riacho que desce achando o próprio caminho, grama e folhas se inclinando ao vento, borboletas flutuando sobre as flores. Uma menina de vestido vermelho espera junto à água. Clique em qualquer ponto do chão e ela vai caminhando até lá — ela não segue mais um trajeto fixo, vai aonde você apontar. Grátis, nada para instalar.
Clique esquerdo para andar até lá · arraste com o direito para olhar · role para dar zoom
A câmera deriva sozinha e devagar até você tocá-la — o primeiro clique ou arraste entrega os controles a você de vez.
O terreno. O chão é uma malha de 240 × 240 em que cada vértice é erguido por uma única função de altura: algumas ondas senoidais sobrepostas para as colinas, um vale escavado por onde passa o riacho, margens achatadas e uma leve borda ao longo da beira. A mesma função posiciona cada folha de grama, cada pedra e cada passo, então nada flutua nem afunda.
O riacho. Uma curva serpenteia vale abaixo, e a água é uma fita estendida ao longo dela. Ela ondula a cada quadro e é desenhada com um material físico e transparente que distorce os seixos e o leito por baixo. Dez peixinhos nadam rio acima e rio abaixo, balançando a cauda.
Grama e árvores. Cerca de 25.000 folhas de grama individuais cobrem as margens, cada uma afinada, curvada, tingida e balançando ao vento. Uma árvore grande e seis menores carregam milhares de cartões de folhas cada, que balançam com a mesma brisa, enquanto um anel de coníferas mais escuras se perde na neblina atrás delas.
Pequenas vidas. Noventa flores em seis cores salpicam o prado, seis borboletas fazem voltas preguiçosas sobre ele, folhas continuam caindo da árvore grande e partículas de pólen pairam no ar.
A luz. Um sol baixo de fim de tarde dourado fica dezesseis graus acima do horizonte, num céu fisicamente baseado, projetando sombras suaves e feixes de luz entre as copas. Nuvens passam lá em cima, e um bloom suave e uma correção de cor dão o acabamento.
O Passeio na floresta é uma única cena em three.js rodando sobre WebGL 2, sem modelos nem texturas de imagem baixados — cada malha e cada textura é gerada em código quando a página abre. A grama e as folhas são malhas instanciadas, algumas linhas inseridas no vertex shader do material padrão as fazem balançar, um raycast contra o terreno transforma o seu clique em destino, e o quadro passa por bloom e por uma etapa de correção de cor antes de chegar à tela.
Escrevemos sobre tudo isso, com trechos do código real: Como fizemos uma floresta 3D explorável em three.js.
Sim. O Passeio na floresta é totalmente grátis e roda direto no seu navegador. Não há nada para baixar nem instalar, e não precisa de cadastro.
Sim, em qualquer navegador móvel recente com WebGL 2. Toque no chão para mandá-la andar, arraste com um dedo para orbitar a câmera e faça pinça para dar zoom. É uma cena bem pesada, então celulares mais antigos podem rodá-la com uma taxa de quadros menor.
Clique com o botão esquerdo em um ponto do chão e ela caminha até lá. Arraste com o botão direito, ou com o esquerdo, para orbitar a câmera ao redor dela; role ou faça pinça para dar zoom, da altura das copas até as flores. Arrastar nunca a faz andar, só um clique curto e limpo faz.
three.js (r160) sobre WebGL 2. Não há modelos 3D nem texturas de imagem baixados: o terreno, as árvores, a grama, a água, os personagens e todas as texturas são gerados em código quando a página carrega. Contamos como funciona em Como fizemos uma floresta 3D explorável em three.js.
A cena desenha cerca de 25.000 folhas de grama e mais de 20.000 cartões de folhas a cada quadro, com sombras suaves, água refrativa transparente, bloom e correção de cor por cima. GPUs mais antigas ou integradas podem ter dificuldade com isso. Sair da tela cheia ou diminuir a janela do navegador ajuda, já que há menos pixels para desenhar.
Fique à vontade para jogar e compartilhar o link. Copiar, incorporar ou usar comercialmente o código ou os recursos exige permissão por escrito; veja Direitos e uso abaixo ou escreva para [email protected].
Passeio na floresta: a cena, a arte, a animação e o código-fonte são © 2026 ShengyuStudio (胜遇工作室). Todos os direitos reservados.
Brinque com isso o quanto quiser e mande o link para quem você quiser. Mas, por favor, não copie, republique nem redistribua o código ou os recursos desta página, e não os use comercialmente — o que inclui incorporá-los em outro site, empacotá-los em um aplicativo ou vendê-los como parte de um produto — sem permissão por escrito.
Para licença comercial, licenciamento de recursos ou só para conversar sobre uma parceria, escreva para [email protected]. Somos gente fácil.
Esta cena é construída sobre three.js, usado sob a licença MIT e o copyright dos seus próprios autores — texto completo da licença. O aviso acima não se estende a essa parte de código aberto.
Fazemos jogos para PC na Steam: um construtor de baralho xianxia, uma partida de sobrevivência rápida com tiro automático e um jogo 3D de sobrevivência e construção numa ilha, ainda em desenvolvimento. Ou experimente o outro brinquedo deste canto do site.
Aqui também: Praia da ilha, Tempestade à proa e o Stickman Spear Run.