Three.js 特定点的光线投射

Question

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

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

这是我用来初始化光线投射器的代码：

// 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;
}

有谁知道为什么当用户鼠标四处移动时这段代码没有突出显示正确的点？任何见解都会非常有帮助！

Answer 1

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

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

我将 raycaster.params.Points.threshold 值降低到 5，现在悬停似乎找到了正确的点。

Three.js 特定点的光线投射

Three.js ray casting for particular Points

javascript

three.js

raycasting