Three.js 针对特定点的光线投射答案

【问题标题】：Three.js ray casting for particular PointsThree.js 针对特定点的光线投射
【发布时间】：2017-12-13 11:20:20
【问题描述】：

我正在使用 Three.js 进行网络可视化，但无法确定为什么我的光线投射实现无法识别正确的点（Full example 和 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;
  }
}

最后，在 body 上触发的 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;
}

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

【问题讨论】：

您好，先生，您的代码链接无效。有更新的吗？这对我们其他人来说真的很有帮助。我无法让它工作 (discourse.threejs.org/t/…)
此解决方案仅适用于 Threejs 的旧版本，但看起来 @Marquizzo 在 Threejs 板上帮助了您:)
是的，他做到了 :) 但是我很难使用该示例来查找我的代码中的缺陷。或者我应该从示例代码开始并用我的观点填充它？
为了获得更多关于从我的代码到 marquizzo 建议的指导，我还在 SO 上提出了一个问题：stackoverflow.com/questions/61821893/… 抱歉，如果我看起来像个菜鸟，但我是.我无法从我的代码跳转到 marquizzo 建议的示例。
我已回复您的查询。用 Three.js 玩得开心！

标签： javascript three.js raycasting

【解决方案1】：

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

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

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

【讨论】：