如何在 Three.js 中从 3D 点创建 3D 表面？

我正在制作一个项目来制作带有点和线（弯曲或非弯曲）的简单 3D 模型。对于第一个版本，我使用 SVG 元素进行简单渲染、平滑曲线和鼠标事件。

现在我正在尝试使用Three.js渲染器而不是 SVG。我必须创建 3d 管来替换曲线，但我不知道如何基于多个 xyz 坐标创建 3D 曲面.

以下是由 4 个点和 4 条线（3 条直线和 1 条曲线）组成的模型示例：

我们可以想象曲线被挤压到更多的点，像这样：

然后我想创建一个表面（或平面），就像蓝色形状一样：

我从这个话题中得到了启发：在 Three.js 中将贝塞尔曲线转换为平面道路 https://stackoverflow.com/questions/45506426/convert-bezier-into-a-plane-road-in-three-js/45512912

var material = new THREE.MeshBasicMaterial({ color: 0xc0c0c0 });
var path = new THREE.CatmullRomCurve3([
    new THREE.Vector3(dots[0].x, dots[0].y, -dots[0].z),
    new THREE.Vector3(dots[1].x, dots[1].y, -dots[1].z),
    new THREE.Vector3(dots[2].x, dots[2].y, -dots[2].z),
    new THREE.Vector3(dots[3].x, dots[3].y, -dots[3].z),
    new THREE.Vector3(dots[0].x, dots[0].y, -dots[0].z)
]);

var pts = [],
    a ;
for (var i = 0 ; i < 3 ; i++) {
    a = i / 3 * Math.PI;
    pts.push(new THREE.Vector2(Math.cos(a) * 1, Math.sin(a) * 1));
}
var shape = new THREE.Shape(pts);

var geometry = new THREE.ExtrudeGeometry(shape, {
    steps : 10,
    bevelEnabled : false,
    extrudePath : path
});

var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

但此示例代码仅创建另一个管状形状。

不要使用四条（贝塞尔）曲线来创建曲面，而是使用贝塞尔曲面 https://en.wikipedia.org/wiki/B%C3%A9zier_surface or NURBS https://en.wikipedia.org/wiki/Non-uniform_rational_B-spline——它们是为此进行数学设计的。这里有一个demo https://threejs.org/examples/webgl_geometry_nurbs.html带有源代码。