Author: 希彼赫
Try it live About this project
Forest Deer is a real-time three.js scene that runs in the browser: a young deer wanders through a giant Yakushima-style cedar forest while sunlight falls through gaps in the canopy, the grass sways in the wind and butterflies drift around the flowers. Take it for a walk, collect the light motes, switch between day and moonlit night — or hand it to the cinematic camera and record a video right in the page.
The deer was made with the Tripo API — generation, smart low-poly, a riggability check and quadruped auto-rigging — and exported as a rigged GLB; the forest is fully procedural. Textures from Poly Haven (CC0).
It plays best in a desktop browser with a keyboard; on a phone, tap the ground to send the deer walking and drag to orbit the camera.
Highlights
- Walk the deer with WASD or click the ground to send it there; hold Shift to trot and drag to orbit the camera
- Walk into the glowing motes to collect them — gather all nine for a run of chimes as the light shafts flare up; press E or click the deer and it looks up at you
- Press R to switch between day and moonlit night, or G for a gust that flattens the grass and scatters the butterflies
- Press C for the cinematic camera and V to record a video with sound right in the page; H hides the key panel
Technical breakdown
The deer · Generated and auto-rigged with Tripo
The deer comes out of a Tripo API pipeline — model generation, smart low-poly, a riggability check and quadruped auto-rigging — and ships as a GLB of about 15,000 triangles with a 41-bone quadruped skeleton and PBR textures. The page loads it with GLTFLoader and scales it to a head height of about 1.55 m, the size of a sika deer.
The Tripo rig is cleanly named: each leg is split into Limb_0 to Limb_3, and the spine, neck and head are numbered in order, so the code finds every leg, the spine and the neck by name and drives them directly — no bone-by-bone mapping by hand. A shader tints the coat to a sika deer’s red-brown summer coat and scatters a line of pale spots along the back; the spots are pinned to bind-pose coordinates, so they stay put on the skin as the deer walks, and against the light the fur picks up a warm rim.
Gait · A walk computed live on the rig
The walk is computed with IK on this rig when the page loads. First come the hoof paths: on the ground each hoof sweeps back at exactly the body’s speed; in the air it lifts, reaches forward and sets down. The legs step left hind, left front, right hind, right front, each on the ground about 70% of the time, while the body only bobs and rolls slightly. Each leg is solved with three-segment IK that keeps the upper and lower segments at their bind-pose angle, with an extra wrist fold as a front leg lifts. The whole gait is baked into a 48-frame loop and handed to AnimationMixer.
Playback speed is body speed divided by hoof sweep speed, so whether the deer ambles or trots with Shift held, its hooves never slide. Standing still, the code turns the four bones from the upper back to the head: the deer grazes for a while, lifts its head to look off to one side, then lowers it again — and the moment it steps off, the neck comes up.
The forest · Grown entirely in code
Apart from the deer, everything in the forest is generated in code; the only textures are Poly Haven CC0 sets for cedar bark, mossy rock and forest floor. The giant cedars stand about 44 m tall: hero trees up close get their own meshes, while the rows behind are drawn in batches with InstancedMesh, and trunk bending uses one formula in both the shader and JS so branches stay attached to the curved trunks. A layer of 8–17 m young trees grows between the giants, and shrubs, ferns, rocks and fallen logs fill out the understory.
The ground is covered in 120,000 instanced grass blades swaying in the vertex shader; press G for a six-second gust that flattens the grass and scatters the butterflies. The grass also knows where the deer is and bends away around it. Eighteen butterflies drift lazily around the flowers until the deer comes close and startles them, and 70 falling leaves, complete with stems and veins, tumble down and light up as they pass through the shafts.
Light · Volumetric shafts and dappled sun
The canopy is built from a few hundred flattened leaf clumps; as each one is placed, it is projected along the sunlight onto the ground and kept clear of 29 preset beam spots, so the shafts fall in separate beams. Volumetric light marches along each view ray sampling the sun’s shadow map at half resolution, then gets composited with distance fog, ACES tone mapping, bloom and FXAA.
Shadows are rewritten as PCSS soft shadows — the farther from the occluder, the softer the edge — and the dapples leaking through the canopy are computed in light space, so grass, bark, deer and light shafts all share the same pattern. Dust in the air only glows inside the shafts and all but vanishes in shadow. Press R and the scene fades to night over three seconds: the sun turns into cool moonlight, the shafts dim, and the motes glow like fireflies.
Camera & capture · Film it right in the page
Press C for the cinematic camera: it circles the deer slowly, rising and dipping, with every bit of UI hidden. Press V to record — MediaRecorder captures the WebGL canvas plus sound at 60 fps and 16 Mbps, saving MP4 where the browser supports it and WebM otherwise, and the quality level stays locked while recording so the resolution never jumps mid-clip.
Every sound is synthesized live with Web Audio: a wind chime for each mote you collect, climbing a pentatonic scale, and a whoosh when the wind gusts. Resolution adapts to the frame rate, stepping down whenever frames drop, and 1 / 2 / 3 lock low, medium or high quality by hand.
