Defines an arbitrary 2d Shape plane using paths with optional holes

It can be used with ExtrudeGeometry, ShapeGeometry, to get points, or to get triangulated faces.

const heartShape = new THREE.Shape();
heartShape.moveTo(25, 25);
heartShape.bezierCurveTo(25, 25, 20, 0, 0, 0);
heartShape.bezierCurveTo(-30, 0, -30, 35, -30, 35);
heartShape.bezierCurveTo(-30, 55, -10, 77, 25, 95);
heartShape.bezierCurveTo(60, 77, 80, 55, 80, 35);
heartShape.bezierCurveTo(80, 35, 80, 0, 50, 0);
heartShape.bezierCurveTo(35, 0, 25, 25, 25, 25);
const extrudeSettings = {
depth: 8,
bevelEnabled: true,
bevelSegments: 2,
steps: 2,
bevelSize: 1,
bevelThickness: 1
};
const geometry = new THREE.ExtrudeGeometry(heartShape, extrudeSettings);
const mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial());

Hierarchy (view full)

Constructors

Properties

arcLengthDivisions: number

This value determines the amount of divisions when calculating the cumulative segment lengths of a Curve via .getLengths. To ensure precision when using methods like .getSpacedPoints, it is recommended to increase .arcLengthDivisions if the Curve is very large.

200

Expects a Integer

autoClose: boolean

Whether or not to automatically close the path.

false
currentPoint: Vector2

The current offset of the path. Any new Curve added will start here.

new THREE.Vector2()

curves: Curve<Vector2>[]

The array of Curves.

[]

holes: Path[]

An array of paths that define the holes in the shape.

[]

type: string

A Read-only string to check if this object type.

Sub-classes will update this value.

Shape

uuid: string

UUID of this object instance.

This gets automatically assigned and shouldn't be edited.

Methods

  • Adds an absolutely positioned EllipseCurve to the path.

    Parameters

    • aX: number
    • aY: number
    • aRadius: number
    • aStartAngle: number
    • aEndAngle: number
    • OptionalaClockwise: boolean

    Returns this

  • Adds an absolutely positioned EllipseCurve to the path.

    Parameters

    • aX: number
    • aY: number
    • xRadius: number

      The radius of the ellipse in the x axis. Expects a Float

    • yRadius: number

      The radius of the ellipse in the y axis. Expects a Float

    • aStartAngle: number
    • aEndAngle: number
    • OptionalaClockwise: boolean
    • OptionalaRotation: number

    Returns this

  • Add a curve to the .curves array.

    Parameters

    Returns void

  • Adds an EllipseCurve to the path, positioned relative to .currentPoint.

    Parameters

    • aX: number
    • aY: number
    • aRadius: number
    • aStartAngle: number
    • aEndAngle: number
    • OptionalaClockwise: boolean

    Returns this

  • This creates a bezier curve from .currentPoint with (cp1X, cp1Y) and (cp2X, cp2Y) as control points and updates .currentPoint to x and y.

    Parameters

    • aCP1x: number
    • aCP1y: number
    • aCP2x: number
    • aCP2y: number
    • aX: number
    • aY: number

    Returns this

  • Creates a clone of this instance.

    Returns this

  • Adds a lineCurve to close the path.

    Returns this

  • Generates the Frenet Frames

    Parameters

    • segments: number

      Expects a Integer

    • Optionalclosed: boolean

    Returns {
        binormals: Vector3[];
        normals: Vector3[];
        tangents: Vector3[];
    }

    Requires a Curve definition in 3D space Used in geometries like TubeGeometry or ExtrudeGeometry.

  • Copies another Curve object to this instance.

    Parameters

    Returns this

  • Adds an EllipseCurve to the path, positioned relative to .currentPoint.

    Parameters

    • aX: number
    • aY: number
    • xRadius: number

      The radius of the ellipse in the x axis. Expects a Float

    • yRadius: number

      The radius of the ellipse in the y axis. Expects a Float

    • aStartAngle: number
    • aEndAngle: number
    • OptionalaClockwise: boolean
    • OptionalaRotation: number

    Returns this

  • Call THREE.Curve.getPoints | getPoints on the Shape and the holes array

    Parameters

    • divisions: number

      The fineness of the result. Expects a Integer

    Returns {
        holes: Vector2[][];
        shape: Vector2[];
    }

  • Copies the data from the given JSON object to this instance.

    Parameters

    • json: {}

      Returns this

    • Get list of cumulative curve lengths of the curves in the .curves array.

      Returns number[]

    • Get total Curve arc length.

      Returns number

    • Get list of cumulative segment lengths.

      Parameters

      • Optionaldivisions: number

        Expects a Integer

      Returns number[]

    • Returns a vector for a given position on the curve.

      Parameters

      • t: number

        A position on the curve. Must be in the range [ 0, 1 ]. Expects a Float

      • OptionaloptionalTarget: Vector2

        If specified, the result will be copied into this Vector, otherwise a new Vector will be created. Default new T.

      Returns Vector2

    • Returns a vector for a given position on the Curve according to the arc length.

      Parameters

      • u: number

        A position on the Curve according to the arc length. Must be in the range [ 0, 1 ]. Expects a Float

      • OptionaloptionalTarget: Vector2

        If specified, the result will be copied into this Vector, otherwise a new Vector will be created. Default new T.

      Returns Vector2

    • Returns an array of points representing a sequence of curves

      Parameters

      • Optionaldivisions: number

        Number of pieces to divide the curve into. Expects a Integer. Default 12

      Returns Vector2[]

      The division parameter defines the number of pieces each curve is divided into However, for optimization and quality purposes, the actual sampling resolution for each curve depends on its type For example, for a LineCurve, the returned number of points is always just 2.

    • Get an array of Vector2's that represent the holes in the shape.

      Parameters

      • divisions: number

        The fineness of the result. Expects a Integer

      Returns Vector2[][]

    • Returns a set of divisions +1 equi-spaced points using .getPointAt | getPointAt(u).

      Parameters

      • Optionaldivisions: number

        Number of pieces to divide the curve into. Expects a Integer. Default 40

      Returns Vector2[]

    • Returns a unit vector tangent at t

      Parameters

      • t: number

        A position on the curve. Must be in the range [ 0, 1 ]. Expects a Float

      • OptionaloptionalTarget: Vector2

        If specified, the result will be copied into this Vector, otherwise a new Vector will be created.

      Returns Vector2

      If the derived Curve does not implement its tangent derivation, two points a small delta apart will be used to find its gradient which seems to give a reasonable approximation.

    • Returns tangent at a point which is equidistant to the ends of the Curve from the point given in .getTangent.

      Parameters

      • u: number

        A position on the Curve according to the arc length. Must be in the range [ 0, 1 ]. Expects a Float

      • OptionaloptionalTarget: Vector2

        If specified, the result will be copied into this Vector, otherwise a new Vector will be created.

      Returns Vector2

    • Given u in the range [ 0, 1 ],

      Parameters

      • u: number

        Expects a Float

      • distance: number

        Expects a Float

      Returns number

      t also in the range [ 0, 1 ]. Expects a Float.

      u and t can then be used to give you points which are equidistant from the ends of the curve, using .getPoint.

    • Connects a LineCurve from .currentPoint to x, y onto the path.

      Parameters

      • x: number

        Expects a Float

      • y: number

        Expects a Float

      Returns this

    • Move the .currentPoint to x, y.

      Parameters

      • x: number

        Expects a Float

      • y: number

        Expects a Float

      Returns this

    • Creates a quadratic curve from .currentPoint with cpX and cpY as control point and updates .currentPoint to x and y.

      Parameters

      • aCPx: number
      • aCPy: number
      • aX: number
      • aY: number

      Returns this

    • Points are added to the curves array as LineCurves.

      Parameters

      Returns this

    • Connects a new SplineCurve onto the path.

      Parameters

      Returns this

    • Returns a JSON object representation of this instance.

      Returns {}

      • Update the cumulative segment distance cache

        Returns void

        The method must be called every time Curve parameters are changed If an updated Curve is part of a composed Curve like CurvePath, .updateArcLengths() must be called on the composed curve, too.