Javascript 如何检测three.js sprite上的点击事件

我想检测three.js sprite上的点击事件代码如下：

function bindEvents(state) {
  let intersected;
  function onDocumentMouseDown(event) {
    event.preventDefault();
    const mouseX = (event.clientX / window.innerWidth) * 2 - 1;
    const mouseY = - (event.clientY / window.innerHeight) * 2 + 1;

    const camera = state.threeD.elements.camera;
    const raycaster = state.threeD.raycaster;

    raycaster.setFromCamera(new THREE.Vector2(mouseX, mouseY), camera);

    var intersects = raycaster.intersectObjects(state.clickables?state.clickables:[]);
    if (intersects.length > 0) {
      if (intersected) intersected.material.map = intersected.currentMap;
      intersected = intersects[0].object;
      intersected.currentMap = intersected.material.map;
      intersected.material.map = selectCityTexture(128, '#cccccc', 'cccccc');
    }

  }

  document.addEventListener('mousedown', onDocumentMouseDown, false);
  document.addEventListener('touchstart', onDocumentMouseDown, false);
}

这几乎起作用，鼠标位置偏移了一定量。可能是一些计算错误，我不知道上面的代码是如何工作的，请帮助

const mouseX = (event.clientX / window.innerWidth) * 2 - 1;
const mouseY = - (event.clientY / window.innerHeight) * 2 + 1;

这些是随时间变化的

const mouseX = (event.clientX / canvas.width) * 2 - 1;
const mouseY = - (event.clientY / canvas.height) * 2 + 1;

这些是随时间变化的

const mouseX = (event.clientX / canvas.width) * 2 - 1;
const mouseY = - (event.clientY / canvas.height) * 2 + 1;

---

使用此官方示例中的代码进行尝试：使用此官方示例中的代码进行尝试：