Minecraft Clone (React + TypeScript + Vite)

A performant Minecraft-like voxel world built with React, Three.js, and Vite.

Features

• Infinite, procedurally generated world using web workers
• Greedy meshing for efficient rendering
• Physics with cannon-es and @react-three/cannon
• Block placement, removal, and inventory system
• Hotbar, main menu, pause menu, and debug HUD
• Optimized for smooth gameplay in the browser
• Game data (worlds, player state) saved in browser localStorage

Tech Stack

• React 19 + TypeScript
• Vite (build tool)
• Three.js (3D rendering)
• @react-three/fiber, @react-three/drei (React bindings for Three.js)
• Zustand (state management)
• cannon-es (physics)

Getting Started

Prerequisites

• Node.js (v18 or newer recommended)
• npm or yarn

Installation

Clone the repository and install dependencies:

git clone <your-repo-url>
cd minecraft-clone
npm install
# or
yarn install

Running Locally

Start the development server:

npm run dev
# or
yarn dev

Open the local URL shown in your terminal (usually http://localhost:5173).

Building for Production

npm run build
# or
yarn build

The output will be in the dist/ folder.

Linting

npm run lint
# or
yarn lint

Deployment

Vercel

1. Push your code to GitHub, GitLab, or Bitbucket.
2. Go to Vercel, import your repository, and follow the prompts.
3. Vercel will auto-detect Vite and set up the correct build settings.
4. No backend or database setup is required—game data is saved in the user's browser.

Project Structure

• src/ — Main source code
  • components/ — UI and game components (world, player, menus, etc.)
  • systems/ — World generation, chunk management, texture atlas
  • workers/ — Web workers for chunk generation and meshing
  • hooks/ — Custom React hooks
  • stores/ — Zustand state stores
  • types/ — TypeScript types
  • utils/ — Utility functions

Data Persistence

All game data (such as saved worlds and player state) is stored in the browser's localStorage under the key minecraft-clone-storage. This means data is local to each browser and device, and is not synced online.

Credits

• Inspired by Minecraft by Mojang
• Built with open-source libraries: React, Three.js, Vite, Zustand, cannon-es, and more

---

Feel free to open issues or contribute!