Search code examples
three.js

THREE.SpriteAlignment showing up as undefined

After updating from three.js r62Dev to r64 or r64Dev I am receiving the following error.

const radarMaterial = new THREE.SpriteMaterial({
  map: radarTexture2,
  useScreenCoordinates: true,
  alignment: THREE.SpriteAlignment.topLeft
});

Uncaught TypeError: Cannot read property 'topLeft' of undefined.

Has any one else experienced this?

Solution

  • SpriteMaterial.alignment and SpriteMaterial.useScreenCoordinates have been removed from Threejs. See the release history: https://github.com/mrdoob/three.js/releases.

    Sprites are now rendered in the scene just like any other object.

    If you want to create a heads-up display (HUD), the work-around is to overlay a second scene of sprites, rendered with an orthographic camera.

    See http://threejs.org/examples/webgl_sprites.html for an example of how to do that.

    three.js r.64