Web Mine Craft

The core of the system is a Next.js application that hosts the game at /play. The UI layer uses TailwindCSS for responsive menus, inventory hotbars, and authentication screens, while the 3D world is rendered inside an R3F <Canvas> component. Player input is captured by a custom Player class (see scripts/player.js) which translates keyboard and mouse events into movement vectors, applies sprinting, jumping, and tool animations, and synchronizes camera lock state.

Terrain is generated per‑chunk in a dedicated Web Worker (app/workers/chunkWorker.ts). The worker uses simplex-noise to compute height values for a 16×16 block grid, returning only the top‑layer block positions to keep the main thread lightweight. Generated blocks are batched into an InstancedMesh, dramatically reducing draw calls and enabling near‑Minecraft performance in the browser.

State sharing across the client is handled by Zustand, which stores player position, inventory, and selected toolbar slot. This store is also the source of truth for UI components, allowing instant reactivity without prop‑drilling. For multiplayer, a Colyseus server (Node.js + TypeScript) will host rooms that broadcast player positions and world updates via WebSocket, ensuring delta‑compressed synchronization.

Persistence is achieved through MongoDB Atlas. User accounts, JWT‑based authentication, and saved chunk modifications are managed via Next.js API routes (/api/chunks, /api/auth). Mongoose schemas define the shape of user documents and chunk data, enabling efficient queries and updates. The overall build pipeline deploys the front‑end to Vercel, while the Colyseus server can run on a Node‑compatible platform (e.g., Vercel Serverless Functions or a dedicated VM).