在平面几何体上添加2D文本three.js

Question

我在平面几何体上创建了平面几何体和纹理化2D文本但我无法在平面上拟合文本 几何正确，我需要根据文本的大小设置平面几何的宽度和高度 有人可以帮我解决这个问题。我还上传了代码和图片。

for(var i=0; i<spriteResponse.length; i++)
{   


    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    metrics = null,
    textHeight = 100,
    textWidth = 0,
    actualFontSize = 2;
    context.font = "normal " + textHeight + "px Arial";
    metrics = context.measureText(cardinal.name);
    var textWidth = metrics.width;
    canvas.width = textWidth;
    canvas.height = textHeight;
    context.font = "normal " + textHeight + "px Arial";
    context.textAlign = "center";
    context.textBaseline = "middle";
    context.fillStyle = "#ff0000";
    context.fillText(cardinal.name, textWidth / 2, textHeight / 2);


    var texture = new THREE.Texture(canvas) ;
    texture.needsUpdate = true;
    //var spriteAlignment = new THREE.Vector2(0,0) ;
    var material = new THREE.MeshBasicMaterial( {color: 0xffffff, side: THREE.DoubleSide ,map : texture} );
    var geometry = new THREE.PlaneGeometry( 0.5, 0.3);
    plane = new THREE.Mesh( geometry, material );
    plane.position.set(X_value,0,Z_value);

    scene.add(plane);
    var direction = camera.getWorldDirection();
    plane.lookAt(direction);
}