canvas - Three.js: how to keep sprite text size unchanged when zooming

Question

In three.js, when the mouse is zoomed, the text will be magnified and reduced accordingly.

var texture = new THREE.Texture( canvas );
var material = new THREE.SpriteMaterial ( { map: texture, transparent:false } );
var sprite = new THREE.Sprite( material );

How do you keep the text size from changing when the mouse is zoomed?

Answer 1

To achieve this with a perspective camera you can set the sprite scale factor according to the ratio between distance of the sprite from camera and some "virtual distance".

In the example below, virtual_d is used to set a fixed virtual "distance" between the sprite and the camera before rendering

var scale = sprite.position.distanceTo(camera.position) / virtual_d;
scale = Math.min(you_max_scale_value, Math.max(you_min_scale_value, scale));

sprite.scale.set(scale, scale, scale);

However if you don't want any distortion, eg in the borders when the field of view is large, use an orthographic camera instead.