THREE.Raycaster not working properly with scaled THREE.Sprite

Question

I am trying to use THREE.Raycaster to show an html label when the user hover an object. It works fine if I use THREE.Mesh but with THREE.Sprite it looks like that there is a

Answer 1

I would consider this a bug in three.js r.75.

Raycasting with meshes in three.js is exact. However, with sprites, it is an approximation.

Sprites always face the camera, can have different x-scale and y-scale applied (be non-square), and can be rotated (sprite.material.rotation = Math.random()).

In THREE.Sprite.prototype.raycast(), make this change:

var guessSizeSq = this.scale.x * this.scale.y / 4;

That should work much better for square sprites. The corners of the sprite will be missed, as the sprite is treated as a disk.

three.js r.75