How to use the EllipseCurve function from three

Find comprehensive JavaScript three.EllipseCurve code examples handpicked from public code repositorys.

three.EllipseCurve is a Three.js curve object that creates an elliptical curve in 3D space.

Selection.js

6
7
8
9
10
11
12
13
14
15

var Selection = function (scene, position) {

  position = utils.checkDefaults(position);

  var curve = new THREE.EllipseCurve(
    position.x1,  0,   // ax, aY
    100, 100,         // xRadius, yRadius
    0,  2 * Math.PI,  // aStartAngle, aEndAngle
    false             // aClockwise

+ 3 other calls in file

ArcballControls.js

GitHub: BaurTokenov/three-js-editor-2

53
54
55
56
57
58
59
60
61
62
//listeners
this.onWindowResize = () => {
    const scale = (this._gizmos.scale.x + this._gizmos.scale.y + this._gizmos.scale.z) / 3;
    this._tbRadius = this.calculateTbRadius(this.camera);
    const newRadius = this._tbRadius / scale;
    const curve = new three_1.EllipseCurve(0, 0, newRadius, newRadius);
    const points = curve.getPoints(this._curvePts);
    const curveGeometry = new three_1.BufferGeometry().setFromPoints(points);
    for (const gizmo in this._gizmos.children) {
        this._gizmos.children[gizmo].geometry = curveGeometry;

+ 7 other calls in file

How does three.EllipseCurve work?

three.EllipseCurve is a class in the Three.js library that represents a 2D ellipse curve, defined by its center point, x and y radii, start and end angles, and clockwise flag. It extends the three.Curve class and overrides its getPoint method to return points along the ellipse curve. The ellipse is calculated by using the parametric equations of the ellipse curve.

CurvedArrow.js

GitHub: rendoir/feup-thesis

2
3
4
5
6
7
8
9
10
11
12
class CurvedArrow extends THREE.Object3D {
    constructor(centerX, centerY, radiusX, radiusY, startAngle, endAngle, clockwise, rotation, lineDivisions, color, headWidth, headLength) {
        super();


        // Arc
        let curve = new THREE.EllipseCurve(
            centerX, centerY,
            radiusX, radiusY,
            startAngle, endAngle,
            clockwise,

+ 3 other calls in file

gcode_reader.js

GitHub: lyxnter/DuetWebControl

997
998
999
1000
1001
1002
1003
1004
1005
1006
} else if ((this.acos - Math.PI).toFixed(3) == this.asin.toFixed(3)) {
	this.endA = this.asin;
} else {
	//console.warn(this.acos.toFixed(3) + "!=" + this.asin.toFixed(3))
}
this.curve = new THREE.EllipseCurve(
	args.i, args.j, // cX, cY
	this.rad, this.rad, // xRadius, yRadius
	this.startA, this.endA, // aStartAngle, aendAngle
	true, // aClockwise

+ 5 other calls in file

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const curve = new THREE.EllipseCurve(
  // x radius
  10,
  // y radius
  5,
  // start angle in radians
  0,
  // end angle in radians
  Math.PI * 2,
  // clockwise or counterclockwise
  false,
  // rotation of the ellipse in radians
  0
);

const points = curve.getPoints(50);
const geometry = new THREE.BufferGeometry().setFromPoints(points);
const material = new THREE.LineBasicMaterial({ color: 0xff0000 });
const ellipse = new THREE.Line(geometry, material);

scene.add(ellipse);

This creates an EllipseCurve with an xRadius of 10, a yRadius of 5, a start angle of 0 radians, an end angle of 2π radians, and counterclockwise direction. Then, the getPoints() method is called on the curve with a resolution of 50 points. These points are used to create a BufferGeometry object and a Line object is created from this geometry. Finally, the Line object is added to the scene.

Other functions in three

Sorted by popularity

three.Vector3 is the most popular function in three (22341 examples)

Other popular packages:

Home

About