Hexagonal & square tile grid system with three.js
JavaScript HTML CSS
Latest commit d6a5744 Sep 18, 2016 @vonWolfehaus remove comments
Permalink
Failed to load latest commit information.
dist update build Sep 18, 2016
editor remove comments Sep 18, 2016
examples update Feb 5, 2016
lib update Dec 30, 2015
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

README.md

3D hex tile system

screenshot

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?

Features

  • 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

Roadmap

  • Improved editor
  • Improved API
  • Abstract grid

Usage

Basic board

screenshot

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();

grid.generate({
    size: 4
});

var board = new vg.Board(grid);

board.generateTilemap();

scene.add(board.group);
scene.focusOn(board.group);

update();

function update() {
    scene.render();
    requestAnimationFrame(update);
}

Examples

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.

Editor

Try it out

screenshot