Extrusion along path

Good morning!
This is the first time I post on the forum hoping for a bit of help.
The project I am working on is a notreally related to gaming but more on realtime geometry creation based on rules.
I have managed to create a nurbs starting from a list of point in a JSON file and now I need to run an extrusion along this path. The extrusion is (for now) a simple ring with (external radius and internal radius) but later can be a shape defined again by a JSON file.
I have managed an example where I have a simple 2D shape (a triangle) but I don’t quite understand how can I have a tube like the one I need. As I said, for now is just a simple pipe with thickness, but later can be 2 diffrent shapes for internal and external profile.
Thanks for the help!

Here the bit of code to create the Nurbs

async function createNurbs() {
    var nurbsControlPoints = [];
    var nurbsKnots = [];
    var nurbsDegree = 3;
    var k = 0;

    for (var i = 0; i <= nurbsDegree; i++) {

    for (i = 0; i < l; i++) {
        var station = parseFloat(data[alName][i]["Station"]);
        if (station >= startTunnel && station <= endTunnel) {
            var x = parseFloat(data[alName][i]["Easting (X)"]) - x0;
            var z = parseFloat(data[alName][i]["Northing (Y)"]) - y0;
            var y = parseFloat(data[alName][i]["Elevation"]);
                new THREE.Vector4(
                    1 // weight of control point: higher means stronger attraction

    for (i = 0; i < nurbsControlPoints.length; i++) {
        var knot = (i + 1) / (nurbsControlPoints.length - nurbsDegree);
        nurbsKnots.push(THREE.Math.clamp(knot, 0, 1));


    nurbsCurve = new THREE.NURBSCurve(nurbsDegree, nurbsKnots, nurbsControlPoints);
    var nurbsGeometry = new THREE.BufferGeometry().setFromPoints(nurbsCurve.getPoints(nurbsControlPoints.length*10));
    var nurbsMaterial = new THREE.LineBasicMaterial({ color: 0x333333 });
    nurbsLine = new THREE.Line(nurbsGeometry, nurbsMaterial);

    //    //var nurbsControlPointsGeometry = new THREE.BufferGeometry();
    //    //nurbsControlPointsGeometry.setFromPoints(nurbsCurve.controlPoints);
    //    //var nurbsControlPointsMaterial = new THREE.LineBasicMaterial({ color: 0x333333, opacity: 0.25, transparent: true });
    //    //var nurbsControlPointsLine = new THREE.Line(nurbsControlPointsGeometry, nurbsControlPointsMaterial);
    //    //nurbsControlPointsLine.position.copy(nurbsLine.position);
    //    //parent.add(nurbsControlPointsLine);  


And here the code to create the ring

function createRing(ir, ct, d) {
    var geometry = new THREE.RingGeometry(ir, ir + ct, d);
    var material = new THREE.MeshBasicMaterial({
        color: 0x0000ff
    mesh = new THREE.Mesh(
    return mesh;

As you menstioned extrusion, have you tried to use THREE.ExtrudeBufferGeometry(), its constructor’s second parameter is an object with the set of options, and one of them is extrudePath.
For reference: https://threejs.org/examples/?q=extru#webgl_geometry_extrude_shapes

Exactly what I am using now.

Maybe makes sense to use a shape with a hole. The shape is for “external” profile, its hole is for “internal” profile.

Yep, thank I figured out how to do it in this way

1 Like