# Hexagon Voxel(Minecraft Like) Geometry

**URL:** <https://discourse.threejs.org/t/hexagon-voxel-minecraft-like-geometry/40379>\
**Category:** Questions\
**Tags:** geometry\
**Created:** [July 15, 2022, 4:48pm UTC](https://discourse.threejs.org/t/hexagon-voxel-minecraft-like-geometry/40379 "2022-07-15T16:48:38Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![drPapus](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/drpapus/32/28037_2.png) [@drPapus](https://discourse.threejs.org/u/drPapus)\
**Post date:** [July 15, 2022, 4:48pm UTC](https://discourse.threejs.org/t/hexagon-voxel-minecraft-like-geometry/40379/1 "2022-07-15T16:48:38Z")

</div>

How to make hexagons instead of cubes?  
I’m trying to make a map of hexagons following the example [three.js manual](https://threejs.org/manual/#en/voxel-geometry) .  
When I did the first option in the manual, it turned out to make a hexagonal mesh and position it.  
The second one turned out to make the hexagon itself , but the class does not work with it.  
I don’t have much experience in programming just 4-months.  
Code: [HEX/client.ts at 1259451da2b210b1cec3960cdcee00ec965cb67a · drPapus/HEX · GitHub](https://github.com/drPapus/HEX/blob/1259451da2b210b1cec3960cdcee00ec965cb67a/src/client/client.ts)

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [July 15, 2022, 6:37pm UTC](https://discourse.threejs.org/t/hexagon-voxel-minecraft-like-geometry/40379/2 "2022-07-15T18:37:35Z")

</div>

Maybe this will help you?

From the [Collection of examples from discourse.threejs.org](https://discourse.threejs.org/t/collection-of-examples-from-discourse-threejs-org/4315)

[BeginnerExample](https://hofk.de/main/discourse.threejs/BeginnerExample/BeginnerExample.html) step 13

line 696:  
const honeyComb = createHoneyComb( radius, rings, thick, depth ); // see function below

```javascript

// ======= to step 13 ============

function createCaps( radius, rings, thick, depth ) {
	
	radius = radius || 0.5;	// radius of corner points, size of a single outer hexagon, see createHoneyComb( )
	rings = rings || 6; // rings of hexagons around the central hexagon
	thick = thick || 0.1;	// wall thick ( per cell, to calculate interior hexagon, caps )
	depth = depth || 1; // depth ( of cell, to calculate z of position )
	
	const rt = radius - thick / Math.cos( Math.PI / 3); // radius of corner points of interior hexagon
	
	const hexagonCount = 3 * rings * rings + 3 * rings + 1;
	
	const capGeometry = new THREE.CircleGeometry( rt, 6, Math.PI / 6 );
	const capMaterial = new THREE.MeshLambertMaterial( { color: 0xffff33, side: THREE.DoubleSide, wireframe: false } );
	
	const caps = new THREE.InstancedMesh( capGeometry , capMaterial, hexagonCount );
	
	positionHexagonInstance( caps, radius, rings, -depth / 2 );
	
	return caps;
	
}

function createHoneyComb( radius, rings, thick, depth ) {
		
	radius = radius || 0.5;	// radius of corner points, size of a single outer hexagon
	rings = rings || 6; // rings of hexagons around the central hexagon
	thick = thick || 0.1;	// wall thick ( per cell, to calculate interior hexagon, caps )
	depth = depth || 1; // depth ( of cell, to calculate z of position )
	
	const hexagonCount = 3 * rings * rings + 3 * rings + 1;
	
	const hexagonGeometry = new THREE.BufferGeometry( );
	const indices = new Uint32Array( 108 );
	const positions = new Float32Array( 84 );
	hexagonGeometry.setIndex( new THREE.BufferAttribute( indices, 1 ) );
	hexagonGeometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
	
	let x, y;
	const z = depth / 2;
	
	makeHexagonPositions( );
	makeHexagonIndices( );
		
	hexagonGeometry.computeVertexNormals( );
	const hexagonMaterial = new THREE.MeshLambertMaterial( {color: 'yellow', side: THREE.DoubleSide, wireframe: false } ); 
	
		//const hexagonMesh = new THREE.Mesh( hexagonGeometry, hexagonMaterial );	// a single only
	
	const honeyComb	= new THREE.InstancedMesh( hexagonGeometry, hexagonMaterial, hexagonCount );
	
	positionHexagonInstance( honeyComb, radius, rings, 0 );
	
	return honeyComb;
	
	function makeHexagonPositions( ) {
		
		const rt = radius - thick / Math.cos( Math.PI / 3);	// radius of corner points of interior hexagon
		
		let cv, sv;
		
		for( let i = 0; i < 7; i ++ ) {
			
			cv = Math.cos( ( 2 * i + 1 ) * Math.PI / 6 );
			sv = Math.sin( ( 2 * i + 1 ) * Math.PI / 6 );
			
			x = rt * cv;
			y = rt * sv;
			
			positions[i * 12] = x;
			positions[i * 12 + 1] = y;
			positions[i * 12 + 2] = -z;
			
			positions[i * 12 + 3] = x;
			positions[i * 12 + 4] = y;
			positions[i * 12 + 5] = z;
			
			x = radius * cv;
			y = radius * sv;
			
			positions[i * 12 + 6] = x;
			positions[i * 12 + 7] = y;
			positions[i * 12 + 8] = -z;
			
			positions[i * 12 + 9] = x;
			positions[i * 12 + 10] = y;
			positions[i * 12 + 11] = z;
			
		}
	
	}
	
	function makeHexagonIndices( ) {
		
		for( let i = 0; i < 6; i ++ ) {
			
			indices[i * 18] = 4 * i + 1; // interior
			indices[i * 18 + 1] = 4 * i + 4;
			indices[i * 18 + 2] = 4 * i;
			
			indices[i * 18 + 3] = 4 * i + 1;
			indices[i * 18 + 4] = 4 * i + 5;
			indices[i * 18 + 5] = 4 * i + 4;
			
			indices[i * 18 + 6] = 4 * i;	// back
			indices[i * 18 + 7] = 4 * i + 6;
			indices[i * 18 + 8] = 4 * i + 2;
			
			indices[i * 18 + 9] = 4 * i;
			indices[i * 18 + 10] = 4 * i + 4;
			indices[i * 18 + 11] = 4 * i + 6;
			
			indices[i * 18 + 12] = 4 * i + 3; // front
			indices[i * 18 + 13] = 4 * i + 5;
			indices[i * 18 + 14] = 4 * i + 1;
			
			indices[i * 18 + 15] = 4 * i + 3;
			indices[i * 18 + 16] = 4 * i + 7;
			indices[i * 18 + 17] = 4 * i + 5;
			
		}
		
	}
	
}

function positionHexagonInstance( iMesh, radius, rings, z ) {
	
	const M4 = new THREE.Matrix4( );
	
	const ri = radius * Math.sqrt( 3 ) / 2;	// inner radius of a single outer hexagon
	
	let x, y;
	
	let h = 0; // hexagon instances
	
	for ( let sg = -1; sg < 2; sg ++ ) {
		
		const rg0 = sg === 0 ? rings : 0;
		
		for( let i = 1, k = 2 * rings + 1 - Math.abs( sg ); k > rings + rg0; i ++, k -- ) {
			
			x = ri * ( 1 - k );
			y = sg * 1.5 * radius * i;
			
			for( let j = 0 ; j < k; j ++ ) {
				
				x += ri * 2;
				
				iMesh.setMatrixAt( h, M4.setPosition( x, y, z ) );
				
				h ++;
				
			}
			
		}
		
	}

}	

function showHideCapsFront( ) {
	
	const showCapsFront = depth / 2;
	const hideCapsFront = -Infinity;
	let sh;
	
	let M4 = new THREE.Matrix4( );
	const position = new THREE.Vector3( );
	const quaternion = new THREE.Quaternion( ); // not used
	const scale = new THREE.Vector3( ); // not used
	
	for ( let i = 0; i < capsFront.count; i ++ ) {
		
		sh = Math.random( ) < 0.3 ? showCapsFront : hideCapsFront;
		
		capsFront.getMatrixAt( i, M4 );
		M4.decompose( position, quaternion, scale );
		capsFront.setMatrixAt( i, M4.setPosition( position.x, position.y, sh ) );
		capsFront.instanceMatrix.needsUpdate = true;
		
	}
	
}

```

* * *

* * *

→ see also [grids](https://hofk.de/main/threejs/grids/)

---

<div class="post-metadata">

**Author:** ![drPapus](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/drpapus/32/28037_2.png) [@drPapus](https://discourse.threejs.org/u/drPapus)\
**Post date:** [July 16, 2022, 10:04am UTC](https://discourse.threejs.org/t/hexagon-voxel-minecraft-like-geometry/40379/3 "2022-07-16T10:04:43Z")

</div>

Thanks a lot i will try it!

---

<div class="post-metadata">

**Author:** ![drPapus](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/drpapus/32/28037_2.png) [@drPapus](https://discourse.threejs.org/u/drPapus)\
**Post date:** [July 25, 2022, 2:50pm UTC](https://discourse.threejs.org/t/hexagon-voxel-minecraft-like-geometry/40379/4 "2022-07-25T14:50:31Z")

</div>

I solve it: [javascript - Hexagon Voxel(Minecraft Like) Geometry - Stack Overflow](https://stackoverflow.com/questions/72996930/hexagon-voxelminecraft-like-geometry)