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

Question

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

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

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

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

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

我从这个话题中得到启发：

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 or NURBS — they are mathematically designed for it. Here is a demo 和源代码。

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

How can I create a 3D surface from 3D points in Three.js?

javascript

bezier

surface

nurbs

three.js