Jump to content

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


Recommended Posts

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




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.

Link to comment
Share on other sites

  • 3 months later...

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


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...