On request.
Another basic help.
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>