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 THRE         


        

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