Hive Wars
Real-time 3D hexagonal bee colony management sim where your workforce processes nectar into honey through a staged economy
A real-time 3D browser RTS about managing a bee colony. Select and command bees to forage flowers, then choreograph a multi-stage honey production pipeline—foragers collect nectar, house bees receive and process it, fanning bees evaporate water, and capping bees seal the final honey. Includes Warcraft 3-style fog of war that persists exploration and shrouds unexplored areas.
- Three.js
- GSAP
- JavaScript ES6
- WebGL / GLSL (shaders)
- HTML5 Canvas
- jQuery
The game world is a hexagonal grid rendered in full 3D using Three.js, with a perspective camera positioned to show both the tactile detail of individual honeycomb cells and the strategic overview of the hive. Each hexagon is a 3D mesh with walls (height-extruded cylinders), floors, and honey stores. Two canvas layers (one for Three.js 3D, one for 2D UI) sit on top of each other for clean interaction.
Gameplay centers on a labor economy. A single forager bee is placed at the hive's center; right-click commands it toward flowers you discover by exploring. When a bee reaches a flower, it collects nectar over 3 seconds. On return, another bee takes the nectar in a 1.5-second mouth-to-mouth handoff, then passes it through a 2.5-second enzyme breakdown, a 3-second wing-fanning evaporation, and a 2-second beeswax capping stage before honey is stored. Each stage is a discrete bee state, and the UI shows a progress bar for selected bees so you watch the transformation unfold.
Fog of war operates as a shader-driven 512x512 texture plane—two channels track exploration (persistent) and current visibility (dynamic). As bees move, the fog updates per-frame: unexplored areas show solid black, explored-but-shrouded regions dim to 60% opacity, and visible zones receive an additive glow with warm golden lighting to evoke sunlight. This creates a stark visual contrast between the dark unknown and the warm-lit discovered world, matching the atmosphere of Warcraft 3 and Total Annihilation.
- Choreographed multi-stage honey production: bees move through 5 sequential states (forage → handoff → process → fan → seal) that can be watched in real-time with progress indicators
- Shader-based fog of war with three visual states (unexplored/black, shroud/dimmed, visible/lit) using a 512x512 texture plane and additive glow rendering
- Three.js 3D hexagonal grid with correct geometry rotations (CylinderGeometry and CircleGeometry aligned with per-mesh and per-geometry transformations) plus perspective camera positioned for both detail and strategy
- Selection ring UI, move indicators, and real-time entity interaction via raycasting with visual feedback for bee states and honey counts
- Hexagonal pathfinding and distance calculations, flower discovery messages, and responsive canvas-based controls (click to select, right-click to move, scroll to zoom)