Floating pirate island diorama with a cliff cross-section (Three.js)
Build a Three.js scene: A small floating diorama chunk of island with a cliff cross-section shows layered rock, a palm tree, a wooden pier, a beached rowboat…
More
1 test · 7 finished runs (0 agent, 7 raw one-shot) · 7 live demos
The prompt
Build a Three.js scene: A small floating diorama chunk of island with a cliff cross-section shows layered rock, a palm tree, a wooden pier, a beached rowboat and a hidden treasure cave lit by a lantern. Waves lap the shore via a shader, gulls circle, and the palm sways. Click the X-marked sand to dig: sand particles fly and a chest rises and opens with a golden glow; the camera slowly orbits the floating base against a teal sky gradient. Everything is built in code from Three.js geometry, materials and shaders; no external models, textures or fonts. The scene must visibly animate from the moment it loads and run in a browser with software WebGL (no GPU). Deliver ONE self-contained HTML file; load Three.js only through an import map from https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js (addons from https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/), with no other external requests. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.
Same prompt, all models: step through 7 runsIn the gallery: one player, arrow keys or swipe.