javascript - 边缘几何 : raycasting not accurate

Question

我在 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 的库，它为我完成所有光线转换，但想象一下我只是使用普通的光线转换器来处理鼠标事件。没有边缘并且仅使用平面，碰撞边界是准确的。

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

提前致谢。

Answer 1

如果您针对 THREE.Line 或 THREE.LineSegments 进行光线转换，则应将 Line.threshold 参数设置为适合的值场景的规模:

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

三.js r.114