Jason ZhuJasonZhu.AI
中
3D worldsbluedev @blueemi992026-10-190:28

Nested spinning hexagon ball physics simulation

Views
13.4K
Likes
277
Replies
6
Saves
45

A physics simulation of balls bouncing inside nested, oppositely spinning hexagonal prisms with cel-shaded visuals, breakable walls and generative Web Audio sound, built as a self-contained HTML/Three.js file using Claude Opus 5.5 from a detailed prompt.

Full prompt2,515 chars

Build a single self-contained HTML file (Three.js via CDN, no other assets) that is the 2026 version of the "ball bouncing inside a spinning hexagon" test.

Scene: a large hollow hexagonal prism (a 3D hexagon) slowly spinning on two axes at once. Inside it, a smaller hexagonal prism spins the opposite way, and inside that, a tiny one. Three nested spinning cages. The cage walls are see-through panels drawn only as clean outlines with a very light flat tint, so every ball inside stays clearly visible.

Physics (write your own, no physics library):
- Start with 1 ball inside the innermost cage. Every 2 seconds a new ball spawns, up to 300, each with its own random size, mass and color.
- Real gravity, friction, restitution and spin. Balls must collide with each other and with the rotating walls, picking up the wall's velocity at the contact point so they get flung realistically. No tunneling through walls, no jitter when balls rest on each other.
- When a ball hits a wall hard enough, that wall panel cracks and eventually breaks into flat shards that also obey physics, so balls can escape into the next cage outward.
- The outer cage never breaks. Escaped balls pile up at the bottom of it.

Look, clean cel-shaded style:
- Toon shading on everything: 2 or 3 hard shading bands per object, crisp dark outlines (inverted-hull or edge detection), flat colors from a small tasteful palette.
- A plain flat light background (soft off-white or pale gray), with a simple flat floor shadow under the cage.
- No bloom, no glow, no neon, no lens flares, no motion blur, no particle haze, no gradients, no transparency stacking. No visual artifacts: no z-fighting, no flickering outlines, no shadow acne, no aliasing (use antialiasing and a sensible pixel ratio).
- Impacts get small, flat cartoon "pop" marks that vanish quickly, not sparks.
- It should look like a clean animated illustration, not a tech demo.

Camera: a slow, smooth orbit by default, plus drag to orbit and scroll to zoom.

Sound: synthesize everything with the Web Audio API. Each collision makes a soft pitched tone based on ball size and impact speed, so it turns into gentle generative music as it gets chaotic. Breaking panels get their own sound. Keep it quiet and pleasant, never clipping.

UI: a small, minimal flat panel in the corner (no glassmorphism) with sliders for gravity, spin speed, bounciness and ball count, a "slow motion" toggle, a "reset" button, and an FPS counter. It must stay at 60fps with 300 balls on a laptop.

Source: the creator's reply under the post. Kept in its original language, unedited.

Tools the creator mentioned

Three.js

Original post: https://x.com/blueemi99/status/2112189854234652746

All works are open data at GitHub · awesome-opus-5.5-video.

Model attribution is as stated by the creator and was not independently reproduced. View counts are a snapshot from 2026-10-20. The work belongs to its creator; DM @GoSailGlobal on X for corrections or removal.

More 3d worlds