javascript - Three.js射线转换特定点

我正在使用Three.js进行网络可视化，但无法确定为什么我的光线转换实现无法识别正确的点(Full example和source)。

更具体地说，我尝试将射线转换与点云一起使用，并且一旦用户将鼠标悬停在该点上，就试图将其颜色更改为白色。现在，悬停点确实会改变点的颜色，但是该事件似乎是在光标附近的点而不是光标下方的点上触发的。

这是我用来初始化ray caster的代码:

// configure the raycaster
raycaster = new THREE.Raycaster();
raycaster.params.Points.threshold = 20;

这是渲染函数:

function render() {
  renderer.render(scene, camera);
  controls.update();
  raycast();
}

// Color hovered points
function raycast() {
  raycaster.setFromCamera(mouse, camera);
  var intersects = raycaster.intersectObject(particles);
  if (intersects.length) {

    var newColor = new THREE.Color();
    newColor.setRGB( 1, 1, 1 );

    var index = intersects[0].index;
    particles.geometry.colors[index] = newColor;
    particles.geometry.colorsNeedUpdate=true;
  }
}

最后，在主体上触发了mousemove事件的回调:

/**
* Mouse coordinates go from 0 to container width {0:1}
* and 0 to container height {0:1}. Multiply by 2
* and subtract 1 to center the mouse coords {-1:1}.
* Furthermore, negate the y axis coords, as in the DOM
* the origin is in the top left corner, while in WebGL
* the origin is in the bottom left corner.
**/

function onDocumentMousemove(e) {
  mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
  mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}

有谁知道为什么当用户在鼠标周围四处浏览时，此代码无法正确显示正确的要点？任何见解将非常有帮助!

最佳答案

在输入上述问题的过程中，我意识到raycaster.params.Points.threshold = 20;行为我的积分设置了一个阈值，该阈值远大于积分本身:

pointMaterial = new THREE.PointsMaterial({
  size: 6,
  vertexColors: THREE.VertexColors
});

我将raycaster.params.Points.threshold的值减小到5，而现在的悬停似乎是正确的点。