如何从Three.js中的3D点创建3D曲面？

Question

我正在制作一个项目，以制作带有点和线（是否弯曲）的简单3d模型。在第一个版本中，我将SVG元素用于简单的渲染，平滑曲线和鼠标事件。

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

这里是一个由4点和4条线（3条直线和1条弯曲）组成的模型的示例：

我们可以想象曲线被拉伸到更多点，像这样：

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

我从这个话题中得到启发：convert bezier into a plane road in three.js

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);

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

Answer 1

使用Bezier SURFACES或NURBS而不是使用四个（Bezier）曲线来创建曲面，而是针对它们进行了数学设计。这是一些demo-查看源代码。