能否通过三角形边长生成WebGL可识别的裁剪空间坐标以绘制三角形？

当然可以做到！不过这里需要理清几个关键的转换逻辑——毕竟WebGL使用的裁剪空间是标准化的[-1, 1]范围，而你给出的边长是自定义的长度单位（比如像素），所以得把基于边长的三角形几何数据映射到这个标准化空间里。

核心思路拆解 #

整个转换过程分为两步：

1. 根据三边长度生成三角形的本地顶点坐标（基于自定义单位的坐标系）
2. 将本地坐标映射到WebGL的裁剪空间（适配画布尺寸、处理轴方向、保持比例）

第一步：从边长生成本地顶点坐标 #

给定三边长度，我们可以用几何计算生成三个顶点的坐标。这里以“将第一个顶点放在原点，第二个顶点放在X轴上”的规则来计算第三个顶点的位置（只要满足三角形三边关系即可）：

function generateTriangleVertices(a, b, c) {
  // 顶点A：(0, 0, 0)
  // 顶点B：(a, 0, 0)（a为第一条边的长度）
  // 通过解二元方程推导顶点C的坐标
  const x = (a * a + b * b - c * c) / (2 * a);
  const y = Math.sqrt(b * b - x * x);
  
  return [
    0, 0, 0,   // 顶点A
    a, 0, 0,   // 顶点B
    x, y, 0    // 顶点C
  ];
}

注意：这个函数要求输入的三边满足三角形不等式（任意两边之和大于第三边），否则会出现NaN的情况。

第二步：将本地坐标转换为裁剪空间坐标 #

接下来要把自定义单位的坐标映射到WebGL的[-1, 1]裁剪空间里，需要处理画布宽高比、轴方向翻转（画布Y轴向下，WebGL裁剪空间Y轴向上），以及缩放平移让三角形适配画布：

function convertToClipSpace(localVertices, canvasWidth, canvasHeight, offsetX = 0, offsetY = 0) {
  // 1. 计算本地坐标的包围盒，确定三角形的宽高范围
  let minX = Infinity, maxX = -Infinity;
  let minY = Infinity, maxY = -Infinity;
  for (let i = 0; i < localVertices.length; i += 3) {
    const x = localVertices[i];
    const y = localVertices[i + 1];
    minX = Math.min(minX, x);
    maxX = Math.max(maxX, x);
    minY = Math.min(minY, y);
    maxY = Math.max(maxY, y);
  }
  const localWidth = maxX - minX;
  const localHeight = maxY - minY;
  const aspectRatio = canvasWidth / canvasHeight;

  // 2. 计算缩放因子：让三角形在裁剪空间内最大化显示且保持比例
  const scaleX = 2 / (localWidth * aspectRatio);
  const scaleY = 2 / localHeight;
  const scale = Math.min(scaleX, scaleY);

  // 3. 计算平移量：默认让三角形居中，可通过offsetX/Y调整位置
  const centerX = (minX + maxX) / 2;
  const centerY = (minY + maxY) / 2;
  const translateX = -centerX * scale + offsetX;
  const translateY = -centerY * scale + offsetY;

  // 4. 逐个转换顶点，同时翻转Y轴适配WebGL坐标系
  const clipVertices = [];
  for (let i = 0; i < localVertices.length; i += 3) {
    const x = localVertices[i];
    const y = localVertices[i + 1];
    const z = localVertices[i + 2];
    
    const clipX = (x * scale) * aspectRatio + translateX;
    const clipY = -(y * scale) + translateY; // 翻转Y轴，适配WebGL坐标系
    clipVertices.push(clipX, clipY, z);
  }

  return clipVertices;
}

完整使用示例 #

假设你有一个画布元素，想要绘制边长为100的等边三角形：

// 1. 获取画布元素及尺寸（注意取绘图缓冲区实际尺寸，不是CSS尺寸）
const canvas = document.getElementById('glCanvas');
const canvasWidth = canvas.width;
const canvasHeight = canvas.height;

// 2. 输入等边三角形的三边长度
const sideLengths = [100, 100, 100];

// 3. 生成本地顶点坐标
const localVertices = generateTriangleVertices(...sideLengths);

// 4. 转换为WebGL可用的裁剪空间坐标
const clipSpaceVertices = convertToClipSpace(localVertices, canvasWidth, canvasHeight);

// 现在clipSpaceVertices就可以直接传给WebGL的缓冲区使用了
console.log(clipSpaceVertices);

额外注意事项 #

• 画布尺寸问题：一定要使用canvas.width和canvas.height获取绘图缓冲区的实际尺寸，不要用CSS设置的宽高，否则会导致图形拉伸。
• 自定义适配：如果你不想让三角形最大化显示，可以手动调整scale变量，比如固定缩放为0.01，让三角形保持原始比例的大小。
• 轴方向：WebGL裁剪空间的Y轴向上，而浏览器画布的Y轴向下，所以转换时必须翻转Y坐标，否则三角形会倒过来。

内容的提问来源于stack exchange，提问作者debarchito