Spider Walk: an eight-legged spider that walks floors, walls and ceilings in your browser
A brown spider with a leg span of about 13 cm lives under a desk. When the page opens it walks a full lap on its own: wooden floor, wall, the underside of a shelf, around the shelf edge onto its top, up to the underside of the desk and back down the wall to the floor. Press a key and you are driving.
How to play
Drive
W walks forward, S backs up, A and D turn. On a phone, hold the arrow buttons in the bottom right corner.
Autopilot
The spider walks one lap under the desk in about 40 seconds, dashing and freezing like a real one. Press P or AUTO to turn it back on.
Camera
Press C or CAM to switch between a chase view, a close-up of the face and a wide view of the desk nook.
Climb a wall
Drive straight into a wall or the cardboard box. The two front legs reach the new surface first and the body only turns once they hold.
Moving box
The cardboard box in the middle of the room slides back and forth. Any foot standing on it rides along.
Show the rays
Press G to see the rays the spider casts to find footholds and read the surface ahead.
How it is built
- There is no pre-made animation. Every frame the spider casts a ray at the surface under its body to find out whether it stands on a floor, a wall or a ceiling, and uses that surface normal as its up direction.
- An inside corner, where the floor meets a wall, is seen early by a ray cast straight ahead. At an outside edge, such as the shelf lip, the downward ray misses and a second ray sweeps back into the edge face. The heading is rotated onto the new surface so the spider keeps its direction after each switch.
- The eight legs move in two alternating groups of four. Each leg finds a foothold with three rays: from the hip toward the target, from above, and back under an edge. A leg only lifts while its neighbours are planted.
- The body is not attached to anything. Its position and tilt come from where the eight feet hold, through springs, so it dips a little each time a foot lands and pitches forward when it speeds up.
- Each leg has femur, tibia, metatarsus and claw segments, bent with two-bone IK. The palps and the hair tufts on the abdomen swing with inertia. The fur is a stack of translucent shells, and the camera focuses on the spider with a macro-style depth of field.
- The whole demo is one JavaScript file on three.js, about 540 KB minified. Phones and slower machines lower the resolution and switch off the depth of field.
Need a 3D page that runs in the browser?
Golden Sea builds games, interactive demos and 3D pages that run straight on the web with nothing to install. See what we have shipped in the Portfolio.
Frequently asked questions
- Does Spider Walk work on phones?
- Yes, in any browser with WebGL (recent Chrome, Safari, Firefox or Edge). The bottom right corner has arrow buttons to drive, CAM to change the view and AUTO for autopilot. Slower devices lower the resolution and turn off the depth of field.
- Does the spider use pre-made animation?
- No. The pose of the legs and body is solved again every frame from where the feet hold and from the raycasts. That is why it can walk on surfaces it has never seen, including a box that is sliding.
- Why doesn't it fall off the ceiling?
- The spider always clings to the surface under its feet, the way a real spider grips with the hairs on its feet. Its up direction is the normal of the surface it stands on, so a ceiling works the same as a floor.
- What is Spider Walk built with?
- three.js r169 and WebGL in a single JavaScript file. The look uses physical materials with a sheen layer for the fur, a soft shadow that follows the spider, environment reflections and a macro-lens depth of field.