hexagon-geo

This is a 3D hexagon plane generator. You may input the size, segment, rotation and texture fitting strategy. It will finally generate a set of vertices (3D coord), with origin at [0,0,0].

Installation

npm install hexagon-geo --save

Usage

Basic

We use three.js as the 3D rendering library for this example.

import hexagonGeoGenerator from 'hexagon-geo';

const HEX_SIZE = 10;
const HEX_SEGMENT = 3;

export default class HexagonGeo extends THREE.BufferGeometry {
  constructor(){
    super();

    let {vertices, indices, uvs, invertedIndices, normals} = hexagonGeoGenerator(HEX_SIZE, HEX_SEGMENT);
    this.setAttribute('position', new THREE.BufferAttribute(new Float32Array(vertices), 3));
    this.setAttribute('normal', new THREE.BufferAttribute(new Float32Array(normals), 3));
    this.setAttribute('uv', new THREE.BufferAttribute(new Float32Array(uvs), 2));
    this.setIndex(indices);
  }
}

Segment = 3

Segment = 10

Rotation

You may rotate the hexagon to get vertical hexagon or whatever you want.

hexagonGeoGenerator(HEX_SIZE, HEX_SEGMENT, Math.PI/4);

Texture Fitting Strategy

There are three strategy for texture fitting (UVs).

Texture (512 x 512)

hexagonGeoGenerator(HEX_SIZE, HEX_SEGMENT, 0, "COVER");				// Default

hexagonGeoGenerator(HEX_SIZE, HEX_SEGMENT, 0, "CONTAIN");

hexagonGeoGenerator(HEX_SIZE, HEX_SEGMENT, 0, "FILL");

Texture with rotation

You may figure out that the texture won't follow the rotation, as we rotate the hexagon before calculate the UVs. If you wish to achieve other effect, you may rotate it afterward as the Advance Usage.

hexagonGeoGenerator(HEX_SIZE, HEX_SEGMENT, Math.PI/4);

API

• hexagonGeoGenerator ( size, segment, rotateAngle, textureFit )

Param	Type	Description	Default
size	number	Edge length of the hexagon	10
segment	integer	The level of subdivision	1
rotateAngle	number	Rotation	0
textureFit	string	Texture fitting strategy, COVER, CONTAIN or FILL only	COVER

Returns	Type	Description
vertices	number[]	The 3D coord of vertices
indices	integer[]	The index of front faces
invertIndices	integer[]	The index of back faces
normals	number[]	Normals
uvs	number[]	UVs for texture mapping

• rotateAll ( vertices, angle )

Param	Type	Description
vertices	number[]	The 3D coord of vertices, which will be manipulated
angle	number	Rotation angle in radian

• computeUV ( vertices, textureFit ) : UVs

Param	Type	Description
vertices	number[]	The 3D coord of vertices
textureFit	string	Texture fitting strategy, COVER, CONTAIN or FILL only

• computeInvertedIndices ( indices ) : invertedIndices

Param	Type	Description
indices	number[]	The indexing of vertices for faces

Advance Usage

Texture with rotation

You may rotate the hexagon to achieve other texture pattern.

import  hexagonGeoGenerator, {rotateAll} from  'hexagon-geo';
...

let {vertices, indices, uvs, normals} = hexagonGeoGenerator(HEX_SIZE, HEX_SEGMENT, -Math.PI/7);
rotateAll(vertices, Math.PI/7);

2D Rendering

Although it designed for 3D plane, it also can be used for 2D.

const OFFSET = [150,150];
let {vertices, indices} = hexagonGeoGenerator(120, 3);

for (let  i=0; i<indices.length; i+=3){
  let points = [indices[i], indices[i+1], indices[i+2]];	// 3 point for a triangle
  points = points.map( pointIndex  => [ 
    vertices[pointIndex*3] + OFFSET[0], 		// x
    vertices[pointIndex*3+1] + OFFSET[1]		// y
  ]); 

  ctx.moveTo(...points[0]);
  ctx.beginPath();
  points.forEach(point  => ctx.lineTo(...point))
  ctx.closePath();
  ctx.fillStyle = i%6===0? '#fff' : '#000';
  ctx.fill();
}

License

• MIT License