Extrude 3d shape from THREE.Line object in three.js

Question

In three.js I have created an ellipseCurve for which I want to extrude and make 3d.

CODE USE TO MAKE THIS:

var curve = new THREE.EllipseCurve(
0,  0,            // ax, aY
10, 13.3,           // xRadius, yRadius
0,  2 * Math.PI,  // aStartAngle, aEndAngle
false,            // aClockwise
0                 // aRotation
);
var path = new THREE.Path( curve.getPoints( 100 ) );
var geometrycirc = path.createPointsGeometry( 50 );
var materialcirc = new THREE.LineBasicMaterial( {
 color : 0xff0000
 } );

// Create the final object to add to the scene
var ellipse = new THREE.Line( geometrycirc, materialcirc );
this.scene.add( ellipse );

I want to use this ellipseCurve as a basis to create an extruded shape similar to these examples.

https://threejs.org/examples/#webgl_geometry_extrude_splines

These examples seem to use vectors to do this, so I assume I need to convert the curve into one.

I am not sure how to do this since I have been unable to find references on this matter.

Any help to do this?

UPDATE: 22/03/2017

Right so I tried to implement the same method of extrusion as found on: https://threejs.org/examples/#webgl_geometry_extrude_splines

I was able to but this spline into my scene:

HERE IS THE CODE TO DO THIS:

/////////////////////////////////////////////////////////////////////////
    //     My line curve                                                   //
    /////////////////////////////////////////////////////////////////////////


    var curve = new THREE.EllipseCurve(
        0,  0,            // ax, aY
        10, 13.3,           // xRadius, yRadius
        0,  2 * Math.PI,  // aStartAngle, aEndAngle
        false,            // aClockwise
        0                 // aRotation
    );

    var path = new THREE.Path( curve.getPoints( 100 ) );
    var geometrycirc = path.createPointsGeometry( 50 );
    var materialcirc = new THREE.LineBasicMaterial( {
        color : 0xff0000
    } );

    // Create the final object based on points and material
    var ellipse = new THREE.Line( geometrycirc, materialcirc );
    this.scene.add( ellipse );



    ////////////////////////////////////////////////////////////////////////
    //    Example of sample closed spine                                  //
    ////////////////////////////////////////////////////////////////////////

    var sampleClosedSpline = new THREE.CatmullRomCurve3( [
        new THREE.Vector3( 0, -40, -40 ),
        new THREE.Vector3( 0, 40, -40 ),
        new THREE.Vector3( 0, 140, -40 ),
        new THREE.Vector3( 0, 40, 40 ),
        new THREE.Vector3( 0, -40, 40 )
    ] );


    sampleClosedSpline.type = 'catmullrom';
    sampleClosedSpline.closed = true;


    //////////////////////////////////////////////////////////////////////////////
    //     Extrusion method to covert the spline/vector data into 3d object     //
    //////////////////////////////////////////////////////////////////////////////



    // I used this method and have tried the following properties but these do not work
    //
    // var tube = new THREE.TubeBufferGeometry( curve, 12, 2, 20, true);
    //
    // 1. ellipse.clone()
    // 2. geometrycirc.clone()
    // 3. materialcirc.clone()
    // 4. path.clone()
    // 5. curve
    //
    // Therefore I am either doing something wrong or there must be a further process that needs
    // to be implemented.



    // this works as standard
    var tube = new THREE.TubeBufferGeometry( sampleClosedSpline, 12, 2, 20, true);


    var tubeMesh = THREE.SceneUtils.createMultiMaterialObject( tube, [
        new THREE.MeshLambertMaterial( {
            color: 0xffffff
        } ),
        new THREE.MeshBasicMaterial( {
            color: 0xff00ff,
            opacity: 0.3,
            wireframe: true,
            transparent: true
        } ) ] );


    tubeMesh.scale.set( .2, .2, .2 );
    this.scene.add( tubeMesh );


    ///////////////////////////////////////////////////////////////////////////////

So when I place the spline property for the one that I have created i get a black screen and the following error msgs:

var curve;

and the other variables used (refer to code to see what I have tried)

EDIT: 23/03/2017

WestLangley's method was the ideal solution

What have you tried so far? Have you tried recreating the example you linked and plug in your curve in place of one of the splines? — jered
– jered, Commented Mar 21, 2017 at 19:13
@jered Tnxs for your input please look at my question again I have added screenshots, example code and thoughts to what i think is happening. — W9914420
– W9914420, Commented Mar 22, 2017 at 13:15

WestLangley · Accepted Answer · 2021-05-28 10:22:17Z

3

You want to create a TubeGeometry or TubeBufferGeometry in the shape of an ellipse.

Here is one way to do it that is general enough for others to use, too.

First, create a new class that defines your path:

// Ellipse class, which extends the virtual base class Curve
class Ellipse extends THREE.Curve {

    constructor( xRadius, yRadius ) {

        super();

        // add radius as a property
        this.xRadius = xRadius;
        this.yRadius = yRadius;


    }

    getPoint( t, optionalTarget = new THREE.Vector3() ) {

        const point = optionalTarget;
        var radians = 2 * Math.PI * t;

        return new THREE.Vector3( this.xRadius * Math.cos( radians ),
                                this.yRadius * Math.sin( radians ),
                                0 );


    }

}

Then create the geometry from the path.

// path
var path = new Ellipse( 5, 10 );

// params
var pathSegments = 64;
var tubeRadius = 0.5;
var radiusSegments = 16;
var closed = true;

var geometry = new THREE.TubeBufferGeometry( path, pathSegments, tubeRadius, radiusSegments, closed );

Super easy. :)

Fiddle: http://jsfiddle.net/62qhxags/

three.js r.129

edited May 28, 2021 at 10:22

answered Mar 22, 2017 at 15:22

WestLangley

105k11 gold badges288 silver badges285 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

W9914420 Over a year ago

many thanks, I had a look at the three.js docs to findout the difference between TubeGeometry and TubeBufferGeometry to be honest they seem the same. I am only wanting to create one instance of this object so which of the two would you advise.

WestLangley Over a year ago

TubeBufferGeometry is more memory-efficient.

Collectives™ on Stack Overflow

Extrude 3d shape from THREE.Line object in three.js

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related