Draw grid on top of model on each face

You have a 3D design:

var verticesLines = new Float32Array( [
    	
    // four lines
       //   x  y   z
    	   -1, -1, 0,
    	    1, -1, 0,
    		
    	    1, -1, 0,
    	    1,  1, 0,
    		
    	    1,  1, 0,
    	    -1, 1, 0,
    			
    	   -1,  1, 0,
    	   -1, -1, 0,
    		
    	] );

Look what happens:

  1. Take a fix number for z ( e.g. -3 then +3)
  2. Add a fix number to all numbers x ( then y)
  3. Swap the complete columns.

(Possibly you first change the column x with z - and look)

try it

On request.
Another basic help.20181210-0916-11694

Based on the instructions above and another simple way.


<!DOCTYPE html>

<head>
  <title> GridBoxCells </title>
  <meta charset="utf-8" />
  <style>
	body {
	overflow: hidden;
	margin: 0;
	}
  </style>
</head>

<body>
</body>

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script>

'use strict';

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(-0.5, 0.75, 1).setLength(20);
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xb0b0b0);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var axesHelper = new THREE.AxesHelper( 12 );
scene.add( axesHelper );

var light = new THREE.DirectionalLight(0xffffff, .5);
light.position.setScalar(10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, .5));

var boxGeometry = new THREE.BoxBufferGeometry(10, 3, 3, 10, 2, 2);  // 10, 3, 3 box dimensions
boxGeometry.attributes.positionStart = boxGeometry.attributes.position.clone();
var gridGeometry = GridBoxGeometry(boxGeometry, false);

var position = boxGeometry.attributes.position;
var positionStart = boxGeometry.attributes.positionStart;

var box0 = new THREE.Mesh(boxGeometry, new THREE.MeshStandardMaterial({ color: 0x999999, transparent: true, opacity: 0.8 }));
var x0 = 5; 
var y0 = 3;
var z0 = 4;
box0.position.set( x0, y0, z0 ); // center of box
scene.add( box0 );
var grid0 = new THREE.LineSegments(gridGeometry, new THREE.LineBasicMaterial({ color: "aqua" }));
grid0.position.set( x0, y0, z0 );
scene.add( grid0 );

var	materialLines  = new THREE.LineBasicMaterial( { color: 0xff00ff, side: THREE.DoubleSide } );
var	materialLines0 = new THREE.LineBasicMaterial( { color: 0xffff00, side: THREE.DoubleSide } );
var	materialLines1 = new THREE.LineBasicMaterial( { color: 0xff0000, side: THREE.DoubleSide } );

var geometryLines0 = new THREE.BufferGeometry();
var verticesLines0 = new Float32Array( [
// to boxGeometry from THREE.BoxBufferGeometry(  10, 3, 3,   10, 2, 2 ); - a container 10, 3, 3  - I think in meters 

// one side of the cell has a length of 1, the other 3 / 2  = 1.5 -->  0.5  , 0.75
		// four lines
	//	     x             y               z 
	   x0+2.5 + (-0.5), y0+0.75 -0.75, z0 + 1.5 + 0.04, // z: +1.5 --> half of depth
	   x0+2.5 + 0.5   , y0+0.75 -0.75, z0 + 1.5 + 0.04,
						  
	   x0+2.5 + 0.5   , y0+0.75 -0.75, z0 + 1.5 + 0.04,
	   x0+2.5 + 0.5   , y0+0.75 +0.75, z0 + 1.5 + 0.04,
						  
	   x0+2.5 + 0.5,    y0+0.75 +0.75, z0 + 1.5 + 0.04,
	   x0+2.5 + (-0.5), y0+0.75 +0.75, z0 + 1.5 + 0.04,
						  
	   x0+2.5 + (-0.5), y0+0.75 +0.75, z0 + 1.5 + 0.04,
	   x0+2.5 + (-0.5), y0+0.75 -0.75, z0 + 1.5 + 0.04,
		
	] );
		
	geometryLines0.addAttribute( 'position', new THREE.BufferAttribute( verticesLines0, 3 ) );

	var lines0 =  new THREE.LineSegments( geometryLines0, materialLines0 )
	scene.add( lines0 );

//......................... another simple solution ..........................................................

var box1 = box0.clone();

box1.position.set( -5, 3, -5 );
scene.add( box1 );
var grid1 = grid0.clone();
grid1.position.set( -5, 3, -5 );
scene.add( grid1 );

var geometryLines1 = new THREE.BufferGeometry();

// original square side length is 2 (-1 to +1) --> *0.5 when scale to get 1
// (you could also work with -0.5, 0.5 to get side length 1 at the beginning
var verticesLines1 = new Float32Array( [
	
		// four lines
        // x   y  z
	   -1, -1, 0,
	    1, -1, 0,
		
	    1, -1, 0,
	    1,  1, 0,
		
	    1,  1, 0,
	    -1, 1, 0,
			
	   -1,  1, 0,
	   -1, -1, 0,
		
	] );
		
	geometryLines1.addAttribute( 'position', new THREE.BufferAttribute( verticesLines1, 3 ) );

	var lines =  new THREE.LineSegments( geometryLines1, materialLines )
	scene.add( lines ); //(original square in the origin of the scene) 
	
	var lines1 =  new THREE.LineSegments( geometryLines1, materialLines1 )
	box1.add( lines1 ); //(original square in the origin of the box)      // or take grid1.add( lines1 );
	
	var linesNx = lines1.clone( );
	// here you have a square with side length 1.5 --> 0.75 * 2 (original square) 
	linesNx.scale.set( 0.75, 1.5 * 0.5, 1.5  );
	linesNx.position.set( -5 - 0.04,  1.5 / 2, 1.5 / 2 );
	linesNx.rotation.set( 0, -Math.PI/ 2, 0);
  	box1.add( linesNx );	
	
	var linesPy = lines1.clone( );
	// one side of the cell has a length of 1, the other 3 / 2  = 1.5
	linesPy.scale.set( 1 * 0.5, 1.5 * 0.5, 1.5  );
	linesPy.position.set( -1.5, 1.5 + 0.04, 1.5 / 2  ); // z = ( middle of cell 0.5 ) * 3 / 2 
	linesPy.rotation.set( Math.PI/ 2, 0, 0);
  	box1.add( linesPy );
	
	var linesPz = lines1.clone( );		
	// one side of the cell has a length of 1, the other 3 / 2  = 1.5
	linesPz.scale.set( 1 * 0.5, 1.5 * 0.5, 1.5  );
	linesPz.position.set( 3.5,  1.5 / 2, 1.5 + 0.04 );
	box1.add( linesPz );
		
render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}


  function GridBoxGeometry(geometry, independent) {
   // @author prisoner849
    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;
  };

</script>

</html>

I appreciate your help. I will try at my end to implement your methods.

Good luck. :slightly_smiling_face: