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

My default, sprites scale according to their distance from the perspective camera -- just like other objects do.

If you do not want them to scale, you can overlay a second scene of sprites, rendered with an orthographic camera. See http://threejs.org/examples/webgl_sprites.html.

It is called a "heads-up-display", or HUD.

EDIT: SpriteMaterial now has a sizeAttenuation property, which you can optionally set to false. Default is true.

three.js r.96

Answer 2

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.