A stunning 3D Ludo board built with Next.js 15, Three.js, and shadcn/ui. Fully customizable themes, interactive gameplay, and modern design.
Click board to switch themes • Drag to rotate • Space for auto-rotateTouch board for themes • Drag to rotate
Every component is crafted with performance, accessibility, and developer experience in mind.
Modify colors, themes, and board elements with simple configuration changes.
const colorThemes = [
{
name: 'Custom',
boardBase: '#1a1a2e',
trackTiles: '#16213e',
players: {
yellow: '#ffd700',
green: '#00ff7f',
blue: '#1e90ff',
red: '#ff6b6b'
}
}
]// Board dimensions
<boxGeometry args={[15, 0.3, 15]} />
// Home area positions
const homes = [
{ x: -4.5, z: -4.5, name: 'PLAYER Y' },
{ x: -4.5, z: 4.5, name: 'PLAYER G' },
// ... more positions
]// Piece geometry
<cylinderGeometry args={[0.25, 0.3, 0.12]} />
<meshStandardMaterial
color={piece.color}
roughness={0.2}
metalness={0.1}
/><OrbitControls
enablePan={true}
enableZoom={true}
minDistance={8}
maxDistance={40}
/>Clone the repository and run pnpm install
Edit the colorThemes array in ludo-simulation.tsx
Run pnpm build and deploy to your favorite platform
Start with this template and create your own interactive 3D Ludo experience.
Understanding the 3D coordinate system used for positioning board elements
The Ludo board uses a standard Three.js coordinate system with the origin (0,0,0) at the board center:
x: -4.5, z: -4.5Top-left quadrant
x: -4.5, z: 4.5Bottom-left quadrant
x: 4.5, z: 4.5Bottom-right quadrant
x: 4.5, z: -4.5Top-right quadrant
x: -7 to 7, z: -1 to 115 × 3 = 45 squares
x: -1 to 1, z: -7 to 73 × 15 = 45 squares