Search code examples
canvasthree.jssprite

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

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?

Solution

  • 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