THREE.JS - using an EllipseCurve as an extrusion path?

[casualbob]

The problem: In the awesome Three.js, I can't figure out how to convert an EllipseCurve into a path that I can extrude along.

In the example below, if I uncomment the LineCurve3, my square extrudes along it nicely. If I run it as the EllipseCurve, there are no errors but nothing shows on screen. I have tried zooming the camera right out to make sure it's not off the screen for any reason.

I know the EllipseCurve is being generated correctly as I can write it out with a line material (not shown in the code below).

The code

var radius = 1100;
var degreesStart = 75;
var degreesEnd = 30;
var radiansStart = (degreesStart * Math.PI) / 180;
var radiansEnd = ((degreesEnd) * Math.PI) / 180;

// this won't seem to work as an extrude path, but doesn't give any errors
var path = new THREE.EllipseCurve(0, 0, radius, radius, radiansStart, radiansEnd, true);

// this works fine as an extrude path
//var path = new THREE.LineCurve3(new THREE.Vector3(0, 0, 0), new THREE.Vector3(1000, 1000, 0));

var extrusionSettings = { steps: 100, bevelEnabled: false, extrudePath: path };

// draw a square to extrude along the path
var sectionSize = [];
sectionSize.push(new THREE.Vector2(0, 0));
sectionSize.push(new THREE.Vector2(1000, 0));
sectionSize.push(new THREE.Vector2(1000, 1000));
sectionSize.push(new THREE.Vector2(0, 1000));

var sectionShape = new THREE.Shape(sectionSize);

var componentGeometry = new THREE.ExtrudeGeometry(sectionShape, extrusionSettings);
var component = new THREE.Mesh(componentGeometry, material);

group.add(component);

scene.add(group);

 

What I have tried: My attempts to make it work have all tried to extract the points from the curve into a path to use in the extrusion. The closest I felt I got was

var ellipsePath = new THREE.CurvePath(path.getSpacedPoints(20));
// where 'path' is my EllipseCurve in the code above
// (and then changed the extrusion settings to use 'ellipsePath ' instead).

 

This gave the error "Cannot read property 'distanceTo' of null".

I can't seem to get my head around how the EllipseCurve relates to points that relate to a path.

Can anyone point me in the right direction please, or have code where you've come across the same problem? Many thanks.

[intrinsic]

I ran into the same problem. After experimenting with EllipseCurve and CurvePath, I concluded that these two are building 2D paths which lead to problems inside ExtrudeGeometry. Examining the source of three.js and the example extrusion based on a 3D spline, I built my own Curve and defined a 3D .getPoint function. This solved the problem and rendered a perfect extrusion. Replace the "var path" line of your code with the following:

var path = new THREE.Curve();
path.getPoint = function (t) {
    // trace the arc as t ranges from 0 to 1
    var segment = (radiansStart - radiansEnd) * t;
    return new THREE.Vector3(radius * Math.cos(segment), radius * Math.sin(segment), 0);
    };

 

[casualbob]

Thank you so much for taking the time to reply. I ended up approximating the arc using LineCurve3 just to move the project on. I should be adding to the project soon in a few weeks so if I get chance I will try your solution. Again, thank you for replying.