计算机图形学 通过叉乘判断一个点是否在三角形内

 

前言 

判断一个点是否位于三角形内可以使用多种方法，其中一种较为直观且常用的方法是利用向量的叉乘。叉乘的方法基于向量的方向来判断，如果一个点在三角形内部，那么从该点到三角形每个顶点的向量与三角形边的向量的叉乘方向应该是相同的（亦即，这些叉乘向量的方向保持一致性，要么全部向内，要么全部向外）。

推论 

假设我们有一个三角形ABC，以及一个需要判断的点P，这里以二维空间为例。我们可以通过以下步骤来判断点P是否位于三角形ABC内：

1. 构建向量：首先构建向量AB, BC, CA，以及向量PA, PB, PC。

2. 计算叉积：计算每对向量的叉乘。在二维中，向量叉乘结果是一个标量值。我们可以通过下面的公式计算两个向量的叉乘：

   

3. 判断方向一致性：检查这三个叉乘结果的符号是否一致。如果三个叉乘值的符号相同（要么都是正，要么都是负，注意零的情况需要特别判断，表示点在边上），则点P在三角形内；否则，点P在三角形外。

这种方法的优势在于它不依赖于精确的坐标值，而是基于方向的判断，因此非常适用于浮点运算，并且可以有效避免浮点运算中常见的精度问题。

实际使用场景实例 

这里是在ar场景中，需要判断当前相机的位置是否在某个矩形的互动区域内（可划分为两个三角形），相机进出互动区域，需要显示隐藏对应的素材，如下代码

    interAssetsVisible() {
      this.data.interactionDtoList.forEach(inter => {
        const tl = this.scene.getElementById(inter.id + 'tl').getComponent('transform')
        const tr = this.scene.getElementById(inter.id + 'tr').getComponent('transform')
        const br = this.scene.getElementById(inter.id + 'br').getComponent('transform')
        const bl = this.scene.getElementById(inter.id + 'bl').getComponent('transform')
        const isInsideTriangle1 = this.isPointInTriangle(this.camera.worldPosition, tl.worldPosition, tr.worldPosition, br.worldPosition); // 第一个三角形
        const isInsideTriangle2 = this.isPointInTriangle(this.camera.worldPosition, tl.worldPosition, br.worldPosition, bl.worldPosition); // 第二个三角形
        this.changeInterModelVisible(isInsideTriangle1 || isInsideTriangle2, inter)
      })
    },
    isPointInTriangle(p, a, b, c) { // 叉乘判断点是否在三角形内的函数
      // 计算边向量，忽略 y 坐标
      const ab = { x: b.x - a.x, z: b.z - a.z }; // 边AB
      const ap = { x: p.x - a.x, z: p.z - a.z }; // 从A到P的向量

      const bc = { x: c.x - b.x, z: c.z - b.z }; // 边BC
      const bp = { x: p.x - b.x, z: p.z - b.z }; // 从B到P的向量

      const ca = { x: a.x - c.x, z: a.z - c.z }; // 边CA
      const cp = { x: p.x - c.x, z: p.z - c.z }; // 从C到P的向量

      // 计算叉乘，忽略 y 坐标
      const cross1 = ab.x * ap.z - ab.z * ap.x; // AB和AP的叉乘
      const cross2 = bc.x * bp.z - bc.z * bp.x; // BC和BP的叉乘
      const cross3 = ca.x * cp.z - ca.z * cp.x; // CA和CP的叉乘

      // 判断叉乘结果的符号
      const sameDirection1 = cross1 >= 0; // 检查AB和AP是否在同一侧
      const sameDirection2 = cross2 >= 0; // 检查BC和BP是否在同一侧
      const sameDirection3 = cross3 >= 0; // 检查CA和CP是否在同一侧
      // console.log(cross1, cross2, cross3);
      return sameDirection1 && sameDirection2 && sameDirection3
    },