javascript - 将二维文本从数组添加到立方体。数以千计的对象

Question

我有这段代码可以创建大约 10,000 个盒子。

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

这很好用，但我想用盒子的名称在侧面标记每个盒子。我可以在场景中添加 2dtext，但是将标签添加到每个框的最佳方法是什么？

例如'01391Y'，我想将盒子的侧面标记为'391Y'

Answer 1

我不知道什么会提供更好的性能。为每个盒子添加一个 2dText 几何图形并将其粘贴在侧面，或者将文本绘制到 Canvas 上并将 Canvas 用作纹理...

以 2dText 为例，但您已经可以正常工作了: https://threejs.org/examples/?q=text#webgl_geometry_text_shapes

或者类似这样的东西？ <强> 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 );