三个 JS：在点云上用鼠标单击光线投射的交点没有产生任何结果（空数组）

Question

我正在渲染点云并尝试 select 一个点，但是方法 raycaster.intersectObjects(scene.children, true) 生成一个空数组。我还发现了很多不同的方法来计算 pointer.x 和 pointer.y。 None 他们工作了。

这是我的 CodePen： https://codepen.io/joshua-holly-fraunhofer/pen/VwyGBVO

这里有什么问题？

function onMouseUp(event) {
  event.preventDefault();
  const raycaster = new THREE.Raycaster();
  const pointer = new THREE.Vector2();
  pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
  pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;

  raycaster.setFromCamera(pointer, camera);

  const intersects = raycaster.intersectObjects(scene.children, true);
  console.log(intersects); // Is empty array
}

Answer 1

您的代码可以正常工作，但相机距离点云（1800 个单位）很远，这使得个体 Point 相对较小。使用默认的光线投射阈值（1 个单位，参见Raycaster.params），用户必须点击非常（也许不可能）接近a Point 以便交叉点注册。事实上，一些餐巾纸数学告诉我，在 1080p 下，您必须在该点的 0.2px 范围内点击，但点击的精度仅为 1px。

由于您的点 material 使用 60 个单位的形状来表示点，将阈值增加到该大小，您将开始获得预期的结果。在初始化 raycaster 的行之后添加此行：

raycaster.params.Points.threshold = 60;

三个 JS：在点云上用鼠标单击光线投射的交点没有产生任何结果（空数组）

Three JS: Intersection with mouse click raycast on point cloud yields no results (empty array)

javascript

three.js

raycasting