Haystack Hunt.

Description

Haystack Hunt is a small browser-based 3D game that literalizes the “needle in a haystack” idiom. A single steel needle is buried inside a golden pile of hay, and you remove the straws one strand at a time until the needle is exposed, then tap it to win. It is built entirely with Three.js and runs in a single self-contained HTML file.

Background

This was a one-day build in the “One Day One Code” series, made to explore efficient 3D rendering on the web. The interesting constraint is scale: the haystack can hold up to 100,000 individual straws, which rules out naive per-mesh rendering and forces the use of instancing and other performance tricks to keep the framerate playable on both desktop and mobile.

Goal

The goal was to turn a familiar idiom into a satisfying tactile game, while keeping everything in one dependency-light HTML file, and to keep it smooth even with tens of thousands of rendered objects.

Features

• Thousands of hay strands rendered efficiently through a single Three.js InstancedMesh.
• Remove the front-most strand under the cursor with a click or tap, complete with a flying-away particle animation.
• Collapse behavior where straws sitting above a gap fall to fill it, so the pile settles as you dig.
• Hover highlighting on desktop that shows exactly which strand you will pick next.
• Four difficulty levels: Tutorial (1,000), Easy (10,000), Normal (50,000), and Hard (100,000) strands; heavy piles auto-disable shadows and hover to protect performance.
• The needle spawns at a random buried spot and is never exposed at the surface.
• Save and continue progress via localStorage, with the pile regenerated deterministically from a stored seed.
• Mobile controls: one-finger drag to rotate, pinch to zoom, tap to pick, plus an anti-spam cooldown between picks.

Technologies

• Three.js (loaded from a CDN via ES module import map) for the WebGL scene, lighting, shadows, and OrbitControls.
• InstancedMesh to draw the entire haystack in one draw call.
• Vanilla JavaScript, HTML, and CSS with no build step, plus a seeded mulberry32 RNG for reproducible piles.

How to Run

Clone the shared one-day-one-code repository and open the project’s folder, then open index.html. Because Three.js loads from a CDN, an internet connection is required; for clean module loading, serve the folder with a static server such as python3 -m http.server 8000 and visit the local URL. A live version is also available at the demo link.

Technical Decisions

Rendering every straw as its own mesh would collapse the framerate at these counts, so the whole pile is a single InstancedMesh with per-instance matrices and colors. Above a threshold the game automatically drops shadows and per-move hover raycasts to keep large piles fluid. Saving relies on a seeded RNG rather than storing every straw, so an entire pile can be reconstructed exactly from just a seed, a count, and the list of removed indices.

What I Learned

I learned how to work with instanced rendering in Three.js, how to fake lightweight collapse physics by dropping only the straws above a cleared gap, and how deterministic seeded randomness makes it possible to save and restore a huge procedural scene with almost no stored data.

Notes

This is part of the shared one-day-one-code repository and is a small daily build meant as an educational demo. A preview image is included in the project folder.