EdgesGeometry：光线投射不准确答案

【问题标题】：EdgesGeometry: raycasting not accurateEdgesGeometry：光线投射不准确
【发布时间】：2018-03-23 02:15:11
【问题描述】：

我在 PlaneGeometry 上使用 EdgesGeometry，它似乎在鼠标事件中创建了一个更大的命中框。然而，这在使用 CircleGeometry 时并不明显。我有以下内容：

    createPanel = function(width, height, widthSegments) {

      var geometry = new THREE.PlaneBufferGeometry(width, height, widthSegments);

      var edges = new THREE.EdgesGeometry( geometry );

      var panel = new THREE.LineSegments( edges, new THREE.LineBasicMaterial({ 
      color: 0xffffff }));

      return panel;

    }

   var tile = createPanel(1.45, .6, 1);

现在我正在使用一个名为 RayInput 的库，它为我完成所有的光线投射，但想象一下我只是使用普通的光线投射器来处理鼠标事件。没有edges 并且只使用平面，碰撞的边界是准确的。

添加 EdgesGeometry 后，垂直碰撞框似乎已显着增加，因此，当我什至没有点击该对象时，它就会被检测到被点击。水平碰撞箱似乎只略有增加。我以前从未使用过 EdgesGeometry，所以有人知道发生了什么吗？

提前致谢。

【问题讨论】：

试试raycaster.linePrecision = 0.1;
谢谢，这在一定程度上有效，但仍然不够准确。我刚刚结束在轮廓形状后面放置一个普通的不可见平面作为命中框作为修复。
不够准确是什么意思？
对不起，我误会了。在这种检测边缘的场景中，光线投射器按预期工作。但就我个人而言，添加另一个 hitbox 是可行的方法。

标签： javascript three.js

【解决方案1】：

如果您针对THREE.Line 或THREE.LineSegments 进行光线投射，则应将Line.threshold 参数设置为适合您场景比例的值：

raycaster.params.Line.threshold = 0.1; // default is 1

three.js r.114

【讨论】：