Autor: 希彼赫
Pruébalo en vivo Sobre este proyecto
«Cervatillo del bosque» es una escena de three.js en tiempo real que funciona en el navegador: un cervatillo pasea por un bosque de cedros gigantes al estilo de Yakushima mientras la luz del sol se cuela por los claros del dosel, la hierba se mece con el viento y las mariposas revolotean alrededor de las flores. Sácalo a pasear, recoge las motas de luz, alterna entre el día y la noche de luna, o déjaselo a la cámara cinematográfica y graba un vídeo en la propia página.
El cervatillo se creó con la API de Tripo —generación, low-poly inteligente, verificación de rigabilidad y rigging automático de cuadrúpedo— y se exportó como un GLB con rig; el bosque es totalmente procedural. Texturas de Poly Haven (CC0).
Se disfruta mejor en un navegador de escritorio con teclado; en el móvil, toca el suelo para que el cervatillo eche a andar y arrastra para orbitar la cámara.
Puntos clave
- Mueve al cervatillo con WASD o haz clic en el suelo para mandarlo allí; mantén Shift para trotar y arrastra para orbitar la cámara
- Camina hasta las motas brillantes para recogerlas: reúne las nueve y sonará una cascada de campanillas mientras los haces de luz se encienden; pulsa E o haz clic en el cervatillo y alzará la vista hacia ti
- Pulsa R para alternar entre el día y la noche de luna, o G para una ráfaga que aplasta la hierba y dispersa las mariposas
- Pulsa C para la cámara cinematográfica y V para grabar un vídeo con sonido en la propia página; H oculta el panel de teclas
Análisis técnico
El cervatillo · Generado y riggeado automáticamente con Tripo
El cervatillo sale de un pipeline de la API de Tripo —generación del modelo, low-poly inteligente, verificación de rigabilidad y rigging automático de cuadrúpedo— y se entrega como un GLB de unos 15.000 triángulos con un esqueleto de cuadrúpedo de 41 huesos y texturas PBR. La página lo carga con GLTFLoader y lo escala a una altura de cabeza de unos 1,55 m, el tamaño de un ciervo sika.
El rig de Tripo tiene nombres limpios: cada pata se divide de Limb_0 a Limb_3, y la columna, el cuello y la cabeza van numerados en orden, así que el código encuentra cada pata, la columna y el cuello por su nombre y los controla directamente, sin mapear hueso por hueso a mano. Un shader tiñe el manto del pardo rojizo que luce el ciervo sika en verano y esparce una hilera de manchas claras a lo largo del lomo; las manchas están fijadas a las coordenadas de la bind pose, así que no se deslizan sobre la piel cuando el cervatillo camina, y a contraluz el pelo se enciende con un borde cálido.
Marcha · Un paso calculado en vivo sobre el rig
El andar se calcula con IK sobre este rig al cargar la página. Primero vienen las trayectorias de las pezuñas: en el suelo, cada pezuña se desplaza hacia atrás exactamente a la velocidad del cuerpo; en el aire, se levanta, avanza y vuelve a apoyarse. Las patas pisan en el orden trasera izquierda, delantera izquierda, trasera derecha, delantera derecha, cada una apoyada alrededor del 70 % del tiempo, mientras el cuerpo apenas sube, baja y se balancea. Cada pata se resuelve con IK de tres segmentos que mantiene los segmentos superior e inferior en su ángulo de la bind pose, con un pliegue extra de la muñeca cuando se levanta una pata delantera. Toda la marcha se hornea en un bucle de 48 fotogramas que se entrega a AnimationMixer.
La velocidad de reproducción es la velocidad del cuerpo dividida por la velocidad con la que las pezuñas barren hacia atrás, así que tanto si el cervatillo pasea como si trota con Shift pulsado, sus pezuñas nunca resbalan. Cuando está quieto, el código gira los cuatro huesos que van de la parte alta del lomo a la cabeza: el cervatillo pasta un rato, levanta la cabeza para mirar hacia un lado y vuelve a bajarla, y en cuanto echa a andar, el cuello se alza.
El bosque · Cultivado por completo en código
Aparte del cervatillo, todo en el bosque se genera en código; las únicas texturas son conjuntos CC0 de Poly Haven para corteza de cedro, roca musgosa y suelo forestal. Los cedros gigantes miden unos 44 m: los árboles protagonistas en primer plano tienen sus propias mallas, mientras que las hileras del fondo se dibujan por lotes con InstancedMesh, y la curvatura de los troncos usa la misma fórmula en el shader y en JS para que las ramas sigan unidas a los troncos curvados. Entre los gigantes crece una capa de árboles jóvenes de 8 a 17 m, y arbustos, helechos, rocas y troncos caídos completan el sotobosque.
El suelo está cubierto por 120.000 briznas de hierba instanciadas que se mecen en el vertex shader; pulsa G para una ráfaga de seis segundos que aplasta la hierba y dispersa las mariposas. La hierba también sabe dónde está el cervatillo y se aparta a su alrededor. Dieciocho mariposas revolotean perezosas alrededor de las flores hasta que el cervatillo se acerca y las espanta, y 70 hojas que caen, con su peciolo y sus nervaduras, descienden dando vueltas y se iluminan al atravesar los haces de luz.
Luz · Haces volumétricos y manchas de sol
El dosel se construye con unos cientos de racimos de hojas aplanados; al colocar cada uno, se proyecta sobre el suelo siguiendo la luz del sol y se mantiene alejado de 29 puntos de haz predefinidos, para que la luz caiga en haces separados. La luz volumétrica avanza paso a paso por cada rayo de visión muestreando el mapa de sombras del sol a media resolución, y luego se compone con niebla de distancia, tone mapping ACES, bloom y FXAA.
Las sombras se reescriben como sombras suaves PCSS —cuanto más lejos del objeto que las proyecta, más suave el borde— y las manchas de luz que se filtran por el dosel se calculan en el espacio de la luz, así que la hierba, la corteza, el cervatillo y los haces de luz comparten el mismo patrón. El polvo en el aire solo brilla dentro de los haces y casi desaparece en la sombra. Pulsa R y la escena pasa a la noche en tres segundos: el sol se convierte en una fría luz de luna, los haces se atenúan y las motas brillan como luciérnagas.
Cámara y captura · Graba en la propia página
Pulsa C para la cámara cinematográfica: rodea lentamente al cervatillo, subiendo y bajando, con toda la interfaz oculta. Pulsa V para grabar: MediaRecorder captura el canvas WebGL y el sonido a 60 fps y 16 Mbps, y guarda MP4 si el navegador lo admite o WebM en caso contrario; el nivel de calidad queda bloqueado durante la grabación para que la resolución no salte a mitad del clip.
Todos los sonidos se sintetizan en vivo con Web Audio: un carillón de viento por cada mota que recoges, que sube por una escala pentatónica, y un silbido cuando sopla la ráfaga. La resolución se adapta a la tasa de fotogramas y baja un nivel cada vez que caen fotogramas, y 1 / 2 / 3 fijan a mano la calidad baja, media o alta.
