Sprites apparently clickable only in upper half

Questions
, , ,
1

I’m trying to make clickable sprites based on PNG images like the following

greenPinpoint
greenPinpoint6251×6251 237 KB

However the sprites seem to be only clickable in their upper half, and slightly above.
Furthermore, The problem seems to diminish as the scale of the sprites increases.
What is happening here?

Screenshot (60)
Screenshot (60)1893×922 12.8 KB

Here are the scene and camera setup

    async function init() {
      scene = new THREE.Scene();
      scene.background = new THREE.Color(0x000000);

      renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      renderer.domElement.addEventListener('pointerdown', onPointerMove);

      camera = new THREE.PerspectiveCamera(
        60,
        window.innerWidth / window.innerHeight,
        1e-5,
        1000
      );
      camera.position.set(0, 3, 3);

    const raycaster = new THREE.Raycaster();
    const pointer = new THREE.Vector2();
    const mouse = new THREE.Vector2();

Here is how I define the sprites

    const map = new THREE.TextureLoader().load('greenPinpoint.png');
    const material = new THREE.SpriteMaterial({color: color, map: map, sizeAttenuation: false});
    const sprite = new THREE.Sprite(material);
    sprite.position.copy(firstPoint).add(new THREE.Vector3(0, 1e-2, 0));
    sprite.scale.set(10e-2, 10e-2, 10e-2);
    scene.add(sprite);

Here is how I set the raycaster in the event handler

    function onPointerMove(event) {
      pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
      pointer.y = - (event.clientY / window.innerHeight) * 2 + 1;

      raycaster.setFromCamera(pointer, camera);

  ...

  }
 }