javascript - ズーム時にThree.jsスケールキャンバステキスト

Question

Three.js では、canvas を使用してテキストを WebGLRenderer に追加しています。これがテキストを追加する最良の方法かどうかはわかりませんが、PerspectiveCamera を使用してズームし、OrbitControls でそれを制御すると、テキストのスケールは変わりません。ズームインおよびズームアウトするときにテキストを拡大縮小するにはどうすればよいですか?

シーンにテキストを追加する方法は次のとおりです。

var canvas = document.createElement('canvas'),
    context = canvas.getContext('2d');

canvas.width = 500;
canvas.height = 400;

canvas.style.width = canvas.width + 'px';
canvas.style.height = canvas.height + 'px';

var half_canvas_width = canvas.width / 2;

context.fillStyle = '#fff';
context.textAlign = 'center';
context.fillText('Hello World', half_canvas_width, 14);

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

var material = new THREE.SpriteMaterial({
    map: texture,
    transparent: true,
    useScreenCoordinates: false
});

sprite = new THREE.Sprite(material);
sprite.scale.set(300, 250, 0.5);

scene.add(sprite);