如何使这个多边形呈现为完整的形状而不是新月形？答案

【问题标题】：How to make this polygon render as a complete shape rather than a crescent?如何使这个多边形呈现为完整的形状而不是新月形？
【发布时间】：2013-10-28 21:44:51
【问题描述】：

我正在使用以下 javascript 函数来创建顶点数组，以便在创建形状时传递给缓冲区。它应该计算第一个顶点位于原点的 n 边正多边形的顶点。然后创建缓冲区并将其存储为传递给函数的形状对象的属性。

var vertices = [];

// Create each vertex by calculating the position of the new vertex relative
// to the old then adding on to the old position

// Begin by setting up the first vertex at the origin

vertices [0] = 0.0;
vertices [1] = 0.0;
vertices [2] = 0.0;

var oldX = 0.0;
var oldY = 0.0;

for (var i = 0; i < shape.numberOfSides; i++) {
    var theta = i * 2 * Math.PI / shape.numberOfSides;
    var y = shape.sideLength * Math.sin(theta);
    var x = shape.sideLength * Math.cos(theta);

    y += oldY;
    x += oldX;

    var start = (i+1) * 3;
    vertices [start] = x;
    vertices [start + 1] = y;
    vertices [start + 2] = 0.0;

    oldX = x;
    oldY = y;

}

// Create a buffer and store the vertices on it

shape.verticesBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, shape.verticesBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

这对三角形非常有效，但对于五边形或以上的形状并不完整——它看起来像一个新月形。我在下方提供了工作三角形和非工作六边形的屏幕截图，两者均使用相同的功能创建。

http://i39.tinypic.com/ndoj8z.png

谁能看出我做错了什么？

【问题讨论】：

首先绘制以原点为中心的多边形。然后，您的顶点是 sin、cos、theta 和与 sideLength 成比例的值的简单函数（您可以使用余弦定律的变体来找到它）。然后，以相同的比例移动所有点，使第一个点在原点上。
@Scott - 谢谢你的想法！这将使锻炼变得更加简单。

标签： javascript webgl

【解决方案1】：

画出三个顶点，你应该会有一个想法 - 现在你正在这样做：

(V1, V2, V3) -> Triangle along an edge
(V2, V3, V4) -> Another triangle along an edge.
(V3, V4, V5) -> Another triangle along an edge.

当你这样做时，没有一个三角形穿过中心，你就会得到你张贴的新月。

要正确绘制它，您需要这样做：（固定每个三角形的 1 个点，并将其他两个点移动到边缘）

(V1, V2, V3)
(V1, V3, V4)
(V1, V4, V5)

这里有一个示例图片供参考：Drawing GL Polygons

【讨论】：