当前位置：首页 > article >正文

three.js+WebGL踩坑经验合集(3):THREE.Line的射线检测问题（不是阈值方面的，也不是难选中的问题）

article 2025/1/26 19:43:54

笔者之所以要在标题里强调不是阈值方面，是因为网上的大多数文章提到线的射线检测问题，90%以上的文章都说是因为线太细所以难选中，然后让大家把线的阈值调大。

而本文所要探讨的问题则恰好相反，不是难选中，而是在某些角度下太容易被误选中了，下面放出测试用例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>threeLine_raycaster</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
  </style>
  <script src="three/build/three.js"></script>
  <script src="three/examples/js/controls/OrbitControls.js"></script>
</head>

<body>
  <script>
    var scene = new THREE.Scene();

    var srcColor = new THREE.Color(1, 1, 1);
    var overColor = new THREE.Color(0.8, 0.3, 0);

    var geometry = new THREE.BufferGeometry();
    var points = [new THREE.Vector3(0, 0, 1000), new THREE.Vector3(0, 0, -1000)];
    geometry.setFromPoints(points);
    var material = new THREE.LineBasicMaterial({color: srcColor});
    var line = new THREE.Line(geometry, material);
    scene.add(line);
    
    var width = window.innerWidth; 
    var height = window.innerHeight; 
    var camera = new THREE.PerspectiveCamera(60, 1, 0.1, 20000);
    camera.position.set(10, 10, 600);  
    camera.lookAt(0, 0, 0);

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    renderer.setClearColor(0x000000, 1); 
    document.body.appendChild(renderer.domElement); 
    
    function render() {
      renderer.render(scene, camera);
      requestAnimationFrame(render);
    }
    
    render();
    
    var controls = new THREE.OrbitControls(camera,renderer.domElement);
    controls.addEventListener('change', render);
    
    // var axisHelper = new THREE.AxesHelper(250);
    // scene.add(axisHelper);	

    var raycaster = new THREE.Raycaster(); 
    
    function onMouseMove(e){	
      //这里是屏幕坐标到ndc的转换，不懂的可以自行上webgl中文网学习
      var x = ((e.clientX - width * 0.5) / width * 2);
      var y = (-(e.clientY - height * 0.5) / height * 2);
      raycaster.setFromCamera(new THREE.Vector2(x, y), camera);
      material.color = srcColor;
      var intersects = raycaster.intersectObject(scene, true);      
      for(let intersect of intersects)
      {
        intersect.object.material.color = overColor;
      }
    }
    
    window.addEventListener("mousemove", onMouseMove);

  </script>
</body>
</html>

按照笔者代码设置的相机参数，会发现鼠标在距离线还有一定距离的时候就已经出现移入效果了，然后旋转一下相机，鼠标又真的离线很近才会碰到，精度提升了不少。

为此笔者翻阅了Line.js的raycast代码，其实现的核心代码在这里

THREE.Ray.distanceSqToSegment计算的是射线到被检测线条（vStart和vEnd的连线）的距离，里面的代码看着让人犯困，各种不知名变量。笔者有想过按着代码演算一遍，但是很快就放弃了这一念头，因为除了可读性差，计算过程繁琐以外，笔者还发现了一个漏洞，就是距离的计算全是取的3D坐标，而透视相机因为具备近大远小的效果，所以越是靠近屏幕，两个3D点在投影到2D后的距离也会越大。

所以这里更像是跟一个具有实际厚度的圆柱体进行碰撞检测，下面我们在THREE.Line所在的位置添加一个半径为1的THREE.CylinderGeometry看看。此处我们不对圆柱体的射线检测做任何界面的反馈。

在创建line的后面追加创建圆柱体的代码：

var cyGeometry = new THREE.CylinderGeometry(1, 1, 1200, 100, 100)
var cyMaterial = new THREE.MeshBasicMaterial({color: srcColor, transparent: true, opacity: 0.25});
var cyLine = new THREE.Mesh(cyGeometry, cyMaterial);
cyLine.rotation.x = Math.PI * 0.5;
scene.add(cyLine);

然后射线检测代码做适当的调整，确保Raycaster只跟Line做射线检测：

//把scene换成line，确保新增的圆柱体不参与射线检测
var intersects = raycaster.intersectObject(line, true);

我们来看看运行的效果

是吧，射线检测的结果更接近于具备透视效果的圆柱体。所以单纯调阈值，对于THREE.Line来说意义不大（除非用的是正交相机，或者线的z跨度不大，或者相机角度被限制在一个很小的范围内）。

数学上，线是一个一维几何体，它不具备厚度这一特性。所谓的厚度，它没有任何几何意义，仅仅是为界面显示而设置的一个属性。

three.js使用原生WebGL中WebGLRendingContext（以下简称gl）的画线api进行线条的渲染。

gl.drawArrays/drawElements(gl.LINES,...);

该api严格按照线的几何概念进行呈现，不会对输入的厚度参数进行近大远小的变换，但是three.js中的Line就没有考虑到这一点，所以射线检测的结果跟视觉没有正确匹配上。

此外，THREE.Line使用原生的gl.lineWidth设置厚度，然而这个原生的api存在兼容问题，火狐和部分桌面程序能识别，但Chrome不认，那除了粗细为1的线以外，THREE.Line是没有办法玩下去的。

盲猜three.js因为浏览器兼容问题而没有花太大精力去修复THREE.Line射线检测不准确的问题，而是另外弄了一个THREE.Line2对象。

Line2不是three.js主包里面的内容，而是被放到了示例文件夹examples里面，因此使用前需要引入（笔者现在还是拿es5版本的three.js，若已使用较新版本的three.js则无需手动引入）

<script src="three/examples/js/lines/LineSegmentsGeometry.js"></script>
<script src="three/examples/js/lines/LineGeometry.js"></script>
<script src="three/examples/js/lines/LineMaterial.js"></script>
<script src="three/examples/js/lines/LineSegments2.js"></script>
<script src="three/examples/js/lines/Line2.js"></script>

然后再把THREE.Line换成THREE.Line2

var geometry = new THREE.LineGeometry();
geometry.setPositions([0, 0, 600, 0, 0, -600]);
var material = new THREE.LineMaterial({color: 0xFFFFFF, resolution: new THREE.Vector2(window.innerWidth, window.innerHeight)});    
var line = new THREE.Line2(geometry, material);
scene.add(line);

可以发现这里不是简单把Line改成Line2就完事，geometry和material的类型都换了，api也不一样。这也是让还没习惯three.js的开发小伙伴们嗤之以鼻的槽点之一。

resolution这个参数也是怪怪的，但笔者打算下一篇再跟大家探讨，大家就先死记一下吧。

我们来看看换THREE.Line2后的效果。