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

Question

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.

score 5 · Accepted Answer · edited Jan 26 '21 at 02:39

5

Instead of using four (Bezier) curves to create a surface, use Bezier SURFACES or NURBS — they are mathematically designed for it. Here is a demo with source code.

edited Jan 26 '21 at 02:39

Erik Kaplun

37,128
15
99
111

answered Feb 07 '19 at 13:34

Kamil Kiełczewski

85,173
29
368
345

1

Thanks for that greatful answer. Though I would have another question, maybe you already have a quick answer (otherwise I'll ask another question) : In your example the surfaces created is made of 4 corners. What if I have a polygon with 5, 7, or 13 points ? I got to understand how to make Nurbs surfaces with 3 or 4 points, but more... I didn't get to do that. – Tot Feb 09 '19 at 21:29
1

@Tot I see that there is something like Bezier triangle ([here](https://en.wikipedia.org/wiki/B%C3%A9zier_triangle)) if you you master triangles then probably you will be able to construct whit them any "Bezier polygon" (however I never use them) - the edges of Bezier triangle are Bezier curves - here is [example](https://www.mdpi.com/symmetry/symmetry-08-00013/article_deploy/html/images/symmetry-08-00013-g002.png), and more [smothness details](https://www.mdpi.com/2073-8994/8/3/13) – Kamil Kiełczewski Feb 10 '19 at 13:08
Thanks for your answer... But it's quite difficult to understand how to set it up. Here is the following... https://stackoverflow.com/questions/54787170/how-can-i-create-a-3d-cubic-bezier-curved-triangle-from-3d-points-in-three-js – Tot Feb 20 '19 at 13:12

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

1 Answers1

Linked