javascript - Three.js在缩放时缩放画布文本

Question

在 Three.js 中，我使用画布将文本添加到 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);