引子

在 Collision Detection ：Polygon 中次要介绍了多边形相干的碰撞检测，接着来看看三角形的状况。三角形同样属于多边形，因而，多边形的办法对三角形都实用。在这里探讨一下另外一种思路。

以下示例未做兼容性查看，倡议在最新的 Chrome 浏览器中查看。

  • Origin
  • My GitHub

Triangle/Point

这是示例页面。

三角形与点的碰撞检测，能够从面积的角度进行切入，看上面的一张图：

如果点在三角形内，那么与三角形顶点相连，切割成了三局部，这三局部的面积之和，如果跟三角形面积相等，那么就能够阐明产生了碰撞。

计算三角形的面积能够应用叉积和海伦公式:

/** * 叉积 用符号 x 示意 * V 矢量 * W 矢量 * |V| |W| 矢量的模，就是线段理论长度 *  V 与 W 之间的角度 */V x W = |V| * |W| * sin()/** * 计算面积公式 * a 底 * h 高 */S = a * h * 1/2

从上图中能够看出 |W| * sin() 的后果就是三角形的高 h ，也就是说：

S = a * h * 1/2 = V x W *1/2

基于下面的实践反对，上面是残缺检测逻辑：

/* * points 三角形顶点坐标，模式为 [[x1,y1],[x2,y2]] * (px,py) 检测点坐标 */function checkTrianglePoint({points,px,py}) {  const [point1,point2,point3] = points;  const [x1,y1] = point1;  const [x2,y2] = point2;  const [x3,y3] = point3;  // 原始总面积  const areaOrig = Math.abs( (x2-x1)*(y3-y1) - (x3-x1)*(y2-y1) );  // 检测点与三角形顶点造成的面积  const area1 = Math.abs( (x1-px)*(y2-py) - (x2-px)*(y1-py) );  const area2 = Math.abs( (x2-px)*(y3-py) - (x3-px)*(y2-py) );  const area3 = Math.abs( (x3-px)*(y1-py) - (x1-px)*(y3-py) );  const areaTotal = area1 + area2 + area3;  // 计算误差允许值  const buffer = 0.1;  if (areaTotal >= areaOrig-buffer && areaTotal<= areaOrig+buffer) {    return true;  }  return false;}

参考资料

  • TRIANGLE/POINT
  • Heron’s Forumula