如何创建从three.js所三维点3D表面？

Question

我正在做一个项目，使简单的3D模型与点和线（弯曲或没有）。对于第一版本我用于简单的SVG元素渲染，平滑的曲线和鼠标事件。

现在，我试图用three.js所呈现的，而不是SVG。我创建3D管来代替曲线，但我不知道如何基于多个XYZ坐标创建三维曲面。

这里是由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 - - 使用四（贝塞尔）曲线创建表面而不是他们在数学上设计的。下面是一些demo - 看它的源代码。