Pixel-art 3D tennis club diorama with interactive match simulation

Prompt

The author shared the full prompt.

Make a pixel-art 3D diorama of a small tennis club on a floating island, the same series and engine as my other pixel dioramas (three.js, orthographic isometric camera turned in quarter steps, a small render target with no anti-aliasing snapped to whole pixels, depth-based outlines, a fixed 64-colour palette matched in OKLab, hard sun shadows, day/dusk/night, rain with puddle reflections). Call it "Love All".

The club: one court inside a chain-link fence with low dark-green windscreens reading LOVE ALL, a net that sags from 1.07 m at the posts to 0.914 m at the strap, the umpire's high chair with a sunshade and the players' chairs with parasols, a three-row stand, a clubhouse with a red roof, a clock showing the real time, a flag and a terrace, a groundsman's shed, floodlights (spotlights aimed at the court, so night stays dark around it), poplars and a gravel path. The court can be clay, grass or a hard court, painted to the rule book.

Real ball physics: gravity, drag and the Magnus force of topspin and slice; a different bounce on each surface; net cords that trickle over or drop back. Players predict the ball's flight, pick where the strings can meet it (after the bounce, or on the volley or smash at the net), run there and swing in time. Each figure is a rig of boxes posed with two-bone IK; the racket follows keyed paths for a forehand, a two-handed backhand, a volley, a smash and a serve with toss, trophy pose and jump, and the strings meet the ball at contact. Shot choice comes from the situation (cross court, down the line, sharp angle, slice when stretched, lob or pass against a net rusher, drop shot against a deep player, approach and volley). Each launch is solved to clear the net and land on its target, then thrown a little off, so winners, errors and long rallies come out of the physics. Four players with their own styles play a ladder where the winner stays on: short sets to four games, no-ad scoring, a tiebreak at 3–3 and a match tiebreak to ten.

Life on court: ball kids fetch dead balls and bounce a new one to the server, who bounces it before serving. The umpire watches the ball and calls the score. On clay the ball leaves marks, and on close calls the umpire climbs down to read the mark. Between sets the groundsmen drag the clay; grass wears behind the baselines. In rain the players sit under their parasols and the groundsmen pull a cover over the court. Spectators follow the ball and clap. Click the court to aim the next shot, with buttons for a lob or a drop shot, and a ×3 speed toggle. Show a tennis scoreboard (sets, point, server, serve speed) and the ladder; English UI; it must work on phones.

Category

Games

Stack

Three.js, Physics

Made with

Three.js

On X

467 likes · 26K views · 367 saves