W9914420 W9914420 -4 years ago 733
Javascript Question

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.

ellipseCurve object

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


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



A simple closed spline


  1. I was able to but this spline into my scene:



Spline in 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 );


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



  1. 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;
curve error

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

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

enter image description here

Answer Source

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 ) {

    // 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. :)

ellipse rendering

Fiddle: http://jsfiddle.net/nu69ed8t/

three.js r.84

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download