2

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

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

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

表面 3d 样本1

我们可以想象曲线被拉伸到更多点，如下所示：

在此处输入图像描述

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

在此处输入图像描述

我受到了这个话题的启发：在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);

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

4

1 回答 1

5

与其使用四条（Bezier）曲线来创建曲面，不如使用Bezier SURFACES或NURBS——它们是专门为它设计的。这是一个带有源代码的演示。

于 2019-02-07T13:34:31.903 回答