javascript - ThreeJS: WebGL レンダラーと Canvas レンダラーのテキスト スプライトのフォント サイズの違い

Question

Three JS を使用して 3D グラフを作成しています。グラフの単位を として表示したいTHREE.SPRITE。を作成するためSPRITEに、最初にキャンバス要素を作成し、それにテキストを追加しました。次にTHREE.Texture、以前に作成した canvas 要素を使用して作成しました。THREE.SpriteMaterialテクスチャをマップとして作成し、THREE.SPRITEこのスプライト マテリアルを使用して作成します。このスプライト マテリアルをシーンに追加しました。レンダラーが のインスタンスである場合THREE.WebGLRenderer、テキストのサイズは非常に小さく、レンダラーが のインスタンスである場合THREE.CanvasRenderer、テキストのサイズは非常に大きくなります。

以下は、スプライトの作成に使用したコードです。

var canvas = document.createElement('canvas'),
    context = canvas.getContext('2d'),
    metrics = null,
    textHeight = 100,
    textWidth = 0,
    actualFontSize = 20;

context.font = "normal " + textHeight + "px Arial";
metrics = context.measureText("Sample Text");
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("Sample Text", textWidth / 2, textHeight / 2);

var texture = new THREE.Texture(canvas);
texture.needsUpdate = true;

var material = new THREE.SpriteMaterial({ map: texture, useScreenCoordinates: false, alignment: THREE.SpriteAlignment.center });
material.transparent = true;
//var textObject = new THREE.Sprite(material);
var textObject = new THREE.Object3D();
var sprite = new THREE.Sprite(material);
textObject.textHeight = actualFontSize;
textObject.textWidth = (textWidth / textHeight) * textObject.textHeight;
//sprite.scale.set(textObject.textWidth / textWidth, textObject.textHeight / textHeight, 1);
textObject.add(sprite);

scene.add(textObject);

それはデフォルトの動作ですか、それとも何か間違ったことをしていますか? Canvas と WebGL レンダラーの両方で一貫して機能する修正を探しています。