CODEWITHSUNDEEP
javascriptthree.js
causita
causita

Reputation: 1708

Adding 2d Text to cube from array. Thousand of objects

I have this code that creates about 10K boxes. 

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 );

This works fine but I would like to label each box on the side with the name of the box. I'm able to add 2dtext on the scene but what's the best way to add the label to each box?

example from '01391Y', I would like to label the side of the box as '391Y'

Upvotes: 1

Views: 467

Answers (1)

Ethan Hermsey
Ethan Hermsey

Reputation: 940

I wouldn't know what would give better performance. Adding a 2dText geometry for every box and sticking it on the side, or draw text onto a canvas and use the canvas as a texture...

And example with 2dText, but you already got that working: https://threejs.org/examples/?q=text#webgl_geometry_text_shapes

Or something in the lines of this?; https://jsfiddle.net/EthanHermsey/u1gyzroL/2/

 var canvas = document.createElement('canvas');
canvas.width = canvas.height = 128;
var ctx = canvas.getContext("2d");

//cube background
ctx.fillStyle='#F3F4EC';
ctx.fillRect(0, 0, 128, 128);

//black text
ctx.fillStyle='black';
ctx.font = "30px Arial";
ctx.fillText("B391Y", 10, 50);

let canvasTexture = new THREE.CanvasTexture( canvas );
let material = new THREE.MeshBasicMaterial({ map: canvasTexture });
var cubeMesh = new THREE.Mesh( cubeGeom, material );

Upvotes: 1

Related Questions