如何从Three.js中的3D点创建3D曲面？ [英] How can I create a 3D surface from 3D points in Three.js?

问题描述

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

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

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

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

我从他的主题是：将bezier转换为三段平坦的道路。 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三.Vector3（点[1] .x，点[1] .y，-点[1] .z），
新的三.Vector3（点[2] .x，点[2] .y， -dots [2] .z），
新的三.Vector3（dots [3] .x，dots [3] .y，-dots [3] .z），
新的三.Vector3（点[0] .x，点[0] .y，-点[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（geometry，material）; 
 scene.add（mesh）; 
  

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

解决方案

而不是使用四个（Bezier）曲线来创建曲面-请使用贝塞尔曲面或 NURBS -他们是为此数学设计的。这是一些演示-查看其源代码。

I'm making a project to make simple 3d models with dots and lines (curved or not). For a first version I used SVG elements for simple render, smooth curves and mouse events.

Now I'm trying to use Three.js renderer instead of SVG. I got to create 3d tubes to replace the curved lines, but I don't know how to create 3d surfaces based on multiple xyz coordinates.

Here is an example of a model made of 4 points and 4 lines (3 straights and 1 curved):

We could imagine that the curve is extruded to more points, to something like this:

Then I would like to create a surface (or plane), just like the blue shape:

I got inspired of this topic: 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);

But this sample code only creates another tube-like shape.

解决方案

Instead of using four (Bezier) curves to create surface - use Bezier SURFACES or NURBS - their are mathematically designed for it. Here is some demo - look at it source code.

这篇关于如何从Three.js中的3D点创建3D曲面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！