Un bosque en three.js por el que puedes pasear, aquí mismo en la página: lomas, un arroyo que baja buscándose su propio camino, hierba y hojas inclinándose con el viento y mariposas revoloteando sobre las flores. Una niña de vestido rojo espera junto al agua. Haz clic en cualquier punto del suelo y ella irá caminando hasta allí: ya no sigue un recorrido fijo, va adonde le señales. Gratis y sin nada que instalar.
Clic izquierdo para caminar hasta ahí · arrastra con el derecho para mirar · rueda para acercar
La cámara deriva sola y despacio hasta que la tocas: el primer clic o arrastre te entrega los controles para siempre.
El terreno. El suelo es una cuadrícula de 240 × 240 en la que cada vértice se eleva con una sola función de altura: unas cuantas ondas senoidales superpuestas para las lomas, un valle excavado por donde corre el arroyo, orillas aplanadas y un ligero reborde junto a la ribera. Esa misma función coloca cada brizna, cada piedra y cada paso, así que nada flota ni se hunde.
El arroyo. Una curva serpentea valle abajo y el agua es una cinta tendida a lo largo de ella. Se ondula en cada fotograma y se dibuja con un material físico y transparente que deforma los guijarros y el lecho que hay debajo. Diez pececillos nadan arriba y abajo de la corriente, agitando la cola.
Hierba y árboles. Unas 25.000 briznas de hierba individuales cubren las orillas, cada una afilada, curvada, teñida y meciéndose con el viento. Un árbol grande y seis más pequeños llevan miles de tarjetas de hojas cada uno que se mecen con la misma brisa, mientras un anillo de coníferas más oscuras se pierde en la niebla detrás de ellos.
Pequeña vida. Noventa flores de seis colores salpican el prado, seis mariposas dan vueltas perezosas por encima, las hojas no dejan de caer del árbol grande y motas de polen quedan suspendidas en el aire.
La luz. Un sol bajo de hora dorada se sitúa dieciséis grados por encima del horizonte en un cielo de base física, y proyecta sombras suaves y haces de luz a través de la copa. Las nubes pasan por encima, y un bloom suave y una corrección de color rematan la imagen.
Paseo por el bosque es una única escena de three.js que funciona sobre WebGL 2, sin modelos ni texturas de imagen descargados: cada malla y cada textura se generan por código al abrir la página. La hierba y las hojas son mallas instanciadas, unas pocas líneas inyectadas en el vertex shader del material estándar las hacen mecerse, un raycast contra el terreno convierte tu clic en un destino, y el fotograma pasa por un bloom y una pasada de corrección de color antes de llegar a la pantalla.
Lo contamos todo, con fragmentos del código real: Cómo hicimos un bosque 3D para recorrer en three.js.
Sí. Paseo por el bosque es totalmente gratis y funciona directamente en tu navegador. No hay nada que descargar ni instalar, y no hace falta registrarse.
Sí, en cualquier navegador móvil reciente con WebGL 2. Toca el suelo para mandarla a caminar, arrastra con un dedo para orbitar la cámara y pellizca para acercar. Es una escena bastante pesada, así que en móviles antiguos puede ir con menos fotogramas por segundo.
Haz clic izquierdo en un punto del suelo y ella camina hasta allí. Arrastra con el botón derecho, o con el izquierdo, para orbitar la cámara a su alrededor; usa la rueda o pellizca para acercar desde la altura de las copas hasta las flores. Arrastrar nunca la manda a caminar; solo lo hace un clic corto y limpio.
Con three.js (r160) sobre WebGL 2. No hay modelos 3D ni texturas de imagen descargados: el terreno, los árboles, la hierba, el agua, los personajes y todas las texturas se generan por código al cargar la página. Contamos cómo funciona en Cómo hicimos un bosque 3D para recorrer en three.js.
La escena dibuja unas 25.000 briznas de hierba y más de 20.000 tarjetas de hojas en cada fotograma, con sombras suaves, agua refractiva transparente, bloom y una corrección de color encima. A las GPU antiguas o integradas les puede costar. Salir de pantalla completa o hacer más pequeña la ventana del navegador ayuda, porque hay menos píxeles que dibujar.
Puedes jugar con él y compartir el enlace cuanto quieras. Copiar, incrustar o dar un uso comercial al código o a los recursos requiere permiso por escrito; consulta Derechos y uso más abajo o escribe a [email protected].
Paseo por el bosque: la escena, el arte, la animación y el código fuente son © 2026 ShengyuStudio (胜遇工作室). Todos los derechos reservados.
Juega con esto todo lo que quieras y comparte el enlace con quien sea. Pero, por favor, no copies, republiques ni redistribuyas el código o los recursos de esta página, ni les des ningún uso comercial —incluidos incrustarlos en otro sitio, empaquetarlos en una app o venderlos como parte de un producto— sin permiso por escrito.
Para una licencia comercial, licencias de recursos o simplemente para hablar de colaborar, escribe a [email protected]. Somos fáciles de tratar.
Esta escena está construida sobre three.js, usado bajo la licencia MIT y el copyright de sus propios autores: texto completo de la licencia. El aviso anterior no se extiende a esa parte de código abierto.
Hacemos juegos para PC en Steam: un constructor de mazos xianxia, una partida de supervivencia rápida con disparo automático y un juego 3D de supervivencia y construcción en una isla, aún en desarrollo. O prueba el otro juguete de este rincón del sitio.
Aquí también: Orilla de la isla, Tormenta a proa y el Stickman Spear Run.