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

Question

我想在 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);
}

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

标签： javascriptthree.js

Answer 1

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;