vonWolfehaus / Von Grid
Licence: mit
Hexagonal & square tile grid system with three.js
Stars: β 336
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Von Grid
React Particles Webgl
π A 2D/3D particle library built on React, Three.js and WebGL
Stars: β 330 (-1.79%)
Mutual labels: 3d, threejs, 2d
Wechart
Create all the [ch]arts by cax or three.js - Cax ε three.js ει δΈεεΎ[葨]
Stars: β 152 (-54.76%)
Mutual labels: 3d, threejs, 2d
TileMapGenerator
Create your own 2D Maps with layer-by-layer system using Noise-Sample and BufferedImage pattern
Stars: β 19 (-94.35%)
Mutual labels: tilemap, 2d
Pathfinding Visualizer Threejs
A visualizer for pathfinding algorithms in 3D with maze generation, first-person view and device camera input.
Stars: β 209 (-37.8%)
Mutual labels: 3d, threejs
React Postprocessing
π¬ postprocessing for react-three-fiber
Stars: β 311 (-7.44%)
Mutual labels: 3d, threejs
Visvis
Visvis - the object oriented approach to visualization
Stars: β 180 (-46.43%)
Mutual labels: 3d, 2d
React Three Editable
π βοΈ Edit your react-three-fiber scene with a visual editor without giving up control over your code.
Stars: β 261 (-22.32%)
Mutual labels: 3d, threejs
Enable3d
πΉοΈ Standalone 3D Framework / Physics for three.js (using ammo.js) / 3D extension for Phaser 3
Stars: β 271 (-19.35%)
Mutual labels: 3d, threejs
Node Occ
build BREP Solids with OpenCascade and NodeJS - 3D Modeling
Stars: β 202 (-39.88%)
Mutual labels: 3d, threejs
Aframe
π
°οΈ web framework for building virtual reality experiences.
Stars: β 13,428 (+3896.43%)
Mutual labels: 3d, threejs
meta2d
Meta2D is open source WebGL 2D game engine for making cross platform games.
Stars: β 33 (-90.18%)
Mutual labels: tilemap, 2d
React Three Fiber
π¨π A React renderer for Three.js
Stars: β 16,097 (+4690.77%)
Mutual labels: 3d, threejs
3d Bat
3D Bounding Box Annotation Tool (3D-BAT) Point cloud and Image Labeling
Stars: β 179 (-46.73%)
Mutual labels: 3d, 2d
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?
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 withvon-grid.js
, etc
Roadmap
- Improved editor
- Improved API
- Abstract grid
Usage
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();
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].