I am trying to draw an open arc with three.js using the code from an example in three.js docs.

The problem with this code is that it draws a straight line from the end point of the arc back to its starting point. I wonder if there is a way to draw an open arc.

I have tried various methods on THREE.Path, like THREE.Path.ellipse, but they all seem to do the same thing.

var curve = new THREE.EllipseCurve(
  0, 0,             // ax, aY
  7, 15,            // xRadius, yRadius
  0, 3/2 * Math.PI, // aStartAngle, aEndAngle
  false             // aClockwise
);
var path = new THREE.Path(curve.getPoints(50));
var geometry = path.createPointsGeometry(50);
var material = new THREE.LineBasicMaterial({color: 0x0000ff});
var ellipse = new THREE.Line(geometry, material);
this.scene.add(ellipse);

I am trying to draw an open arc with three.js using the code from an example in three.js docs.

The problem with this code is that it draws a straight line from the end point of the arc back to its starting point. I wonder if there is a way to draw an open arc.

I have tried various methods on THREE.Path, like THREE.Path.ellipse, but they all seem to do the same thing.

var curve = new THREE.EllipseCurve(
  0, 0,             // ax, aY
  7, 15,            // xRadius, yRadius
  0, 3/2 * Math.PI, // aStartAngle, aEndAngle
  false             // aClockwise
);
var path = new THREE.Path(curve.getPoints(50));
var geometry = path.createPointsGeometry(50);
var material = new THREE.LineBasicMaterial({color: 0x0000ff});
var ellipse = new THREE.Line(geometry, material);
this.scene.add(ellipse);

• javascript
• three.js

• You'll be more likely to get help if you create a plunker or jsfiddle that illustrates your problem. – Jonathan Wilson Commented May 16, 2015 at 3:24

2 Answers 2

If you want to create an open arc (or line) in three.js, you can use a pattern like so:

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

var points = curve.getSpacedPoints( 20 );

var path = new THREE.Path();
var geometry = path.createGeometry( points );

var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );

var line = new THREE.Line( geometry, material );

scene.add( line );

three.js r.71

I know this is a bit old but THREE.RingGeometry would be a good solution.

Just use the thetaLength argument to tweak the curve length. Although you are actually drawing a section of a ring instead of a true arc, you can add thickness very easily.

Check out the documentation and an interactive demo here: https://threejs/docs/#api/en/geometries/RingGeometry