# Extrusion along path

**URL:** <https://discourse.threejs.org/t/extrusion-along-path/9585>\
**Category:** Questions\
**Tags:** extrude-geometry\
**Created:** [September 10, 2019, 8:38pm UTC](https://discourse.threejs.org/t/extrusion-along-path/9585 "2019-09-10T20:38:26Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Cesare\_Caoduro](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/cesare_caoduro/32/7115_2.png) [@Cesare\_Caoduro](https://discourse.threejs.org/u/Cesare_Caoduro)\
**Post date:** [September 10, 2019, 8:38pm UTC](https://discourse.threejs.org/t/extrusion-along-path/9585/1 "2019-09-10T20:38:26Z")

</div>

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++) {
        nurbsKnots.push(0);
    }

    for (i = 0; i < l; i++) {
        var station = parseFloat(data[alName][i]["Station"]);
        //console.log(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"]);
            nurbsControlPoints.push(
                new THREE.Vector4(
                    x,
                    y,
                    z,
                    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));
    }

    //console.log(nurbsControlPoints);

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

    // //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(
        geometry,
        material
    );
    
    return mesh;
}

```

 ![2019-09-11%2006_34_35-Welcome%20to%20AECOM%20Web%20Server](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/a/aadf2cec66eeba84b9bd3c50b8a2d33d36a69877.jpeg)  
 ![2019-09-11%2006_32_10-Welcome%20to%20AECOM%20Web%20Server](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/7/73028953e545a000f69a1b59cbcdfac4422b79a9.jpeg)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [September 10, 2019, 8:48pm UTC](https://discourse.threejs.org/t/extrusion-along-path/9585/2 "2019-09-10T20:48:31Z")

</div>

Hi!  
As you menstioned extrusion, have you tried to use [`THREE.ExtrudeBufferGeometry()`](https://threejs.org/docs/index.html#api/en/geometries/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](https://threejs.org/examples/?q=extru#webgl_geometry_extrude_shapes)

---

<div class="post-metadata">

**Author:** ![Cesare\_Caoduro](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/cesare_caoduro/32/7115_2.png) [@Cesare\_Caoduro](https://discourse.threejs.org/u/Cesare_Caoduro)\
**Post date:** [September 10, 2019, 9:00pm UTC](https://discourse.threejs.org/t/extrusion-along-path/9585/3 "2019-09-10T21:00:54Z")

</div>

Exactly what I am using now.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [September 10, 2019, 9:05pm UTC](https://discourse.threejs.org/t/extrusion-along-path/9585/4 "2019-09-10T21:05:53Z")

</div>

> [@Cesare\_Caoduro](#):
>
> for now is just a simple pipe with thickness, but later can be 2 diffrent shapes for internal and external profile.

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

---

<div class="post-metadata">

**Author:** ![Cesare\_Caoduro](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/cesare_caoduro/32/7115_2.png) [@Cesare\_Caoduro](https://discourse.threejs.org/u/Cesare_Caoduro)\
**Post date:** [September 10, 2019, 9:15pm UTC](https://discourse.threejs.org/t/extrusion-along-path/9585/5 "2019-09-10T21:15:06Z")

</div>

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