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);

  ...

  }
 }
2

Hi, maybe you can try to set the click position using the real size of the container that has the domelement.

const container = viewer.renderer.domElement;
      const rect = container.getBoundingClientRect();
      
      // Calculate mouse position relative to the container
      const x = ((event.clientX - rect.left) / container.clientWidth) * 2 - 1;
      const y = -((event.clientY - rect.top) / container.clientHeight) * 2 + 1;
      
      mouse.x = x;
      mouse.y = y;

      raycaster.setFromCamera(mouse, viewer.scene.getActiveCamera());
      const intersects = raycaster.intersectObject(sprite);