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

问题

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)

So I just need some advice onto what is happening or other methods that I could try.

Tnxs

EDIT: 23/03/2017

WestLangley's method was the ideal solution

回答1:

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
function Ellipse( xRadius, yRadius ) {

    THREE.Curve.call( this );

    // add the desired properties
    this.xRadius = xRadius;
    this.yRadius = yRadius;

}

Ellipse.prototype = Object.create( THREE.Curve.prototype );
Ellipse.prototype.constructor = Ellipse;

// define the getPoint function for the subClass
Ellipse.prototype.getPoint = function ( t ) {

    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/nu69ed8t/1/

three.js r.84

来源：https://stackoverflow.com/questions/42934609/extrude-3d-shape-from-three-line-object-in-three-js

标签

javascript

three.js