GridBoxGeometry

This question was asked many times on SO, but there hasn’t been any appropriate and simple solution so far. I can’t say though that mine is just what we need, but anyway, here it is. Based on the method .toGrid() from this showcase Grids of Waves (shaders).

GridBoxGeometry

https://jsfiddle.net/prisoner849/8hqy99jj/

GridBoxGeometry. Takes two parameters.
The first one geometry is of the type THREE.BoxBufferGeometry.
The second one independent is optional boolean. Default value is false. If set to true, the resulting geometry will have a cloned copy of the buffer attribute position from the first parameter, otherwise, it shares this attribute.

Criticism is very welcomed.

  function GridBoxGeometry(geometry, independent) {
    if (!(geometry instanceof THREE.BoxBufferGeometry)) {
      console.log("GridBoxGeometry: the parameter 'geometry' has to be of the type THREE.BoxBufferGeometry");
      return geometry;
    }
    independent = independent !== undefined ? independent : false;

    let newGeometry = new THREE.BoxBufferGeometry();
    let position = geometry.attributes.position;
    newGeometry.attributes.position = independent === false ? position : position.clone();

    let segmentsX = geometry.parameters.widthSegments || 1;
    let segmentsY = geometry.parameters.heightSegments || 1;
    let segmentsZ = geometry.parameters.depthSegments || 1;

    let startIndex = 0;
    let indexSide1 = indexSide(segmentsZ, segmentsY, startIndex);
    startIndex += (segmentsZ + 1) * (segmentsY + 1);
    let indexSide2 = indexSide(segmentsZ, segmentsY, startIndex);
    startIndex += (segmentsZ + 1) * (segmentsY + 1);
    let indexSide3 = indexSide(segmentsX, segmentsZ, startIndex);
    startIndex += (segmentsX + 1) * (segmentsZ + 1);
    let indexSide4 = indexSide(segmentsX, segmentsZ, startIndex);
    startIndex += (segmentsX + 1) * (segmentsZ + 1);
    let indexSide5 = indexSide(segmentsX, segmentsY, startIndex);
    startIndex += (segmentsX + 1) * (segmentsY + 1);
    let indexSide6 = indexSide(segmentsX, segmentsY, startIndex);

    let fullIndices = [];
    fullIndices = fullIndices.concat(indexSide1);
    fullIndices = fullIndices.concat(indexSide2);
    fullIndices = fullIndices.concat(indexSide3);
    fullIndices = fullIndices.concat(indexSide4);
    fullIndices = fullIndices.concat(indexSide5);
    fullIndices = fullIndices.concat(indexSide6);

    newGeometry.setIndex(fullIndices);

    function indexSide(x, y, shift) {
      let indices = [];
      for (let i = 0; i < y + 1; i++) {
        let index11 = 0;
        let index12 = 0;
        for (let j = 0; j < x; j++) {
          index11 = (x + 1) * i + j;
          index12 = index11 + 1;
          let index21 = index11;
          let index22 = index11 + (x + 1);
          indices.push(shift + index11, shift + index12);
          if (index22 < ((x + 1) * (y + 1) - 1)) {
            indices.push(shift + index21, shift + index22);
          }
        }
        if ((index12 + x + 1) <= ((x + 1) * (y + 1) - 1)) {
          indices.push(shift + index12, shift + index12 + x + 1);
        }
      }
      return indices;
    }
    return newGeometry;
  };
3 Likes

Another way to get a GridBox.

Uses THREEg addon https://discourse.threejs.org/t/addon-to-create-special-extended-geometries/1855/3

Try it on http://sandboxthreeg.threejs.hofk.de/gridBoxTHREEg.html
20180307-2003-59694

Add
waffleDeep: function( t ){ return 0.02 },
to parameters0 and you get

20180307-2028-51891

<!DOCTYPE html>
<!--   *** example MagicBox - THREEg - ***
/**
 * @author hofk / http://threejs.hofk.de/
*/
-->
<html lang="de">
<head>
	<title> Magic Box </title>
	<meta charset="utf-8" />
</head>
<body bgcolor="#cccccc " >
</body>
<script src="three.min.90.js"></script>
<script src="OrbitControls.js"></script>
<script src="THREEx.WindowResize.js"></script>
<script src="THREEg.js"></script>
<script>
'use strict'
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
camera.position.set( 1, 2, 3);
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xefefef, 1 );
var container = document.createElement( 'div' );
document.body.appendChild( container );
container.appendChild( renderer.domElement );
THREEx.WindowResize( renderer, camera );
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enableZoom = true;
var light1 = new THREE.PointLight();
light1.position.set( -2, 2, 4 );
scene.add( light1 ); 
var light2 = new THREE.PointLight();
light2.position.set( -6, -3, -6 );
scene.add( light2 );
var clock  = new THREE.Clock( true );
var time;
var side = THREE.DoubleSide; // material
var materials = [																		// material index:
	new THREE.MeshBasicMaterial( { transparent: true, opacity: 0.45, 	side: side } ),	//  0 transparent
	new THREE.MeshPhongMaterial( { color: 0xff0000, emissive: 0xff0000, side: side } ), //  1 red	
	new THREE.MeshPhongMaterial( { color: 0x444444, emissive: 0x333333, side: side } )	//  2 grey	
];
var parameters0 = {
	sides: [ 7,7,7,7 ],
	materials: [ 2, 2, 2, 2, 2, 2 ],	
	radius: function( t ){ return 0 },
	widthSegments: 8,
	heightSegments: 8,
	depthSegments: 8,
	explode: function( t ){ return 0.01 },
}
var geometry0 = new THREE.BufferGeometry();
geometry0.createMagicBox = THREEg.createMagicBox;
geometry0.createMagicBox( parameters0 );
var mesh0 = new THREE.Mesh( geometry0, materials );
scene.add( mesh0 );
var parameters1 = {
	sides: [ 7,7,7,7 ],
	materials: [ 1, 1, 1, 1, 1, 1 ],	
	radius: function( t ){ return 0 },
	widthSegments: 8,
	heightSegments: 8,
	depthSegments: 8,	
}
var geometry1 = new THREE.BufferGeometry();
geometry1.createMagicBox = THREEg.createMagicBox;
geometry1.createMagicBox( parameters1 );
var mesh1 = new THREE.Mesh( geometry1, materials );
scene.add( mesh1 );
animate();
function animate( ) {	
	requestAnimationFrame( animate );
	time = clock.getElapsedTime( );	
	geometry0.morphVerticesMagicBox( time );
	geometry1.morphVerticesMagicBox( time );
	renderer.render( scene, camera );
	controls.update( );	
}
</script>
</html>

A dynamic example of this
http://sandboxthreeg.threejs.hofk.de/dynamicGridBoxTHREEg.html

2 Likes