Hexagonal & square tile grid system with three.js
Branch: master
Clone or download
Latest commit ba40543 Dec 5, 2017
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist update build Sep 18, 2016
editor remove comments Sep 18, 2016
examples update Feb 5, 2016
lib Bump Three.js to r88 Nov 7, 2017
src seal grid overlay (fixes #15) Jul 11, 2016
.eslintrc fixed square grid Feb 3, 2016
.gitattributes update Jan 18, 2016
.gitignore update Dec 13, 2015
LICENSE Initial commit Feb 12, 2015
README.md fix gulp examples command Feb 8, 2016
editor.png breaking API; added vg.Cell Jan 17, 2016
gulpfile.js fixes Jan 20, 2016
hex-grid-basic.jpg breaking API; added vg.Cell Jan 17, 2016
hex-grid.jpg map maker works! varied height! cached geo! Mar 2, 2015
package.json update Jan 13, 2016


3D hex tile system


I never found a good (and free!) library for creating perfect hexagons and arranging them in a grid. But I did find Amit's wonderful explanation, and finally had the time to throw something together.

You can use the Board class with different graph types (hex and square), or you can make your own if you implement the interface.

Please use this to make awesome hex-based web games. Or port the code and make awesome hex games there. Just make awesome hex games, ok?


  • Simple API for attaching objects to the grid through Board.js
  • A pathfinding* with or without weighted nodes, and a walkable flag
  • Make maps with the editor (autosaves to localstorage, and save/load as .json files)
  • Varied height
  • Sparse maps
  • Mouse interaction with the grid's cells (over, out, down, up, click, wheel)
  • Programmatic geometry, allow you to precisely adjust every aspect of the hexagon
  • Square grid that can be used interchangeably
  • Include only the hex grid by downloading dist/hex-grid.js, or all grid types with von-grid.js, etc


  • Improved editor
  • Improved API
  • Abstract grid


Basic board


var scene = new vg.Scene({ // I made a very handy util for creating three.js scenes quickly
	cameraPosition: {x:0, y:150, z:150}
}, true); // 'true' or a config object adds orbit controls

var grid = new vg.HexGrid();

	size: 4

var board = new vg.Board(grid);




function update() {


For the simple examples you can drop them into Chrome, but for ones that require images or models, you'll have to run gulp serve-examples. A browser tab will be opened to the examples directory for you.


Try it out