I have developed a script that generates approximately 10,000 boxes using the following code:
var c=[];
c.push([13,0,3021,98,'01391A']);
c.push([13,102,3021,98,'01391W']);
c.push([13,204,3021,98,'01391Y']);
c.push([13,306,3021,98,'01391Z']);
c.push([13,0,3069,98,'01392A']);
c.push([13,102,3069,98,'01392W']);
...
var materials = [];
var materials2 = [];
var materials3 = [];
var totalGeom = new THREE.Geometry();
var totalGeom2 = new THREE.Geometry();
var totalGeom3 = new THREE.Geometry();
for (var i in c)
{
var cubeGeom = new THREE.CubeGeometry( 48, c[i][3] , 40 );
var cubeMat = new THREE.MeshBasicMaterial( { color: 0xF3F4EC });
materials.push(cubeMat);
var cubeMesh = new THREE.Mesh( cubeGeom, cubeMat );
cubeMesh.position.set(c[i][0] + 24, ((c[i][1]) + ((c[i][3]) / 2)), c[i][2] + 20);
var outlineMaterial2 = new THREE.MeshBasicMaterial( { color: 0xCCCFBC,side: THREE.BackSide} );
materials2.push(outlineMaterial2);
var outlineMesh2 = new THREE.Mesh( cubeGeom, outlineMaterial2 );
outlineMesh2.position = cubeMesh.position;
outlineMesh2.scale.multiplyScalar(1.05);
THREE.GeometryUtils.merge(totalGeom, cubeMesh);
THREE.GeometryUtils.merge(totalGeom2, outlineMesh2);
}
var total = new THREE.Mesh(totalGeom, new THREE.MeshFaceMaterial(materials));
var total2 = new THREE.Mesh(totalGeom2, new THREE.MeshFaceMaterial(materials2));
scene.add( total );
scene.add( total2 );
The current functionality works well, but I am looking for a way to label each box on the side with its respective name. Although I can add 2D text to the scene, I'm unsure about the best approach for adding labels to each box.
For example, for '01391Y', I would like to label the side of the box as '391Y'.