3d形状填充连接到P5.js webGL

Question

这是我想要达到的效果

这是通过处理3.x完成的

我正在尝试使用p5.js重新创建相同的效果 https://editor.p5js.org/atommic/sketches/kqblWtqln

当所有顶点都具有相同的z值时，这就是p5.js上的样子

当所有顶点都在同一平面上时，没有问题，并且看起来像预期的那样

此形状的X和Y值是2个数组。 Z值是mouseX的函数。

for (var i = 0; i < xpos0.length; i++) {

    G = abs((xpos0[i] - mouseX+500)) / (80);
    if (G >= 1) {
        G = 1;
    }
    curveY = curvePoint(-5, 15, 0, 20, G);

    vertex(xpos0[i], ypos0[i], -curveY);  
}

这是使用不同的z值时在P5.js上的外观

移动鼠标并更改某些顶点的Z值时，会发生这种效果。 填充以某种方式将所有内容连接到数组的第一个顶点

知道为什么会发生这种情况以及如何避免这种情况吗？

Answer 1

显然这是一个已知问题，因为在p5js文档中将其描述为预期行为

https://p5js.org/reference/#/p5/vertex