javascript - 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 space that increases with the scale of the object.

The creation process is the same for both scenario, I only change the type based on USE_SPRITE variable.

if ( USE_SPRITE ) {

  // using SpriteMaterial / Sprite
  m = new THREE.SpriteMaterial( { color: 0xff0000 } );
  o = new THREE.Sprite( m );

} else {

  // using MeshBasicMaterial / Material
  m = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
  o = new THREE.Mesh(new THREE.PlaneGeometry( 1, 1, 1 ),  m );

}

https://plnkr.co/edit/J0HHFMpDB5INYLSCTWHG?p=preview

I am not sure if it is a bug with THREE.Sprite or if I am doing something wrong. Thanks in advance.

three.js r73

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