Class Shape

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

Remarks

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

Example

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

See

Hierarchy (view full)

Constructors

constructor

Properties

type uuid holes currentPoint curves autoClose arcLengthDivisions

Methods

extractPoints getPointsHoles absarc absellipse arc bezierCurveTo ellipse lineTo moveTo quadraticCurveTo setFromPoints splineThru add closePath getPoint getCurveLengths getPoints getSpacedPoints getPointAt getLength getLengths updateArcLengths getUtoTmapping getTangent getTangentAt computeFrenetFrames clone copy toJSON fromJSON

Constructors

constructor

  • new Shape(points?): Shape

  • Creates a Shape from the points

    Parameters

    Returns Shape

    Remarks

    The first point defines the offset, then successive points are added to the curves array as THREE.LineCurve | LineCurves. If no points are specified, an empty Shape is created and the .currentPoint is set to the origin.

Properties

Readonlytype

type: string

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

Remarks

Sub-classes will update this value.

Default Value

Shape

uuid

uuid: string

UUID of this object instance.

Remarks

This gets automatically assigned and shouldn't be edited.

holes

holes: Path[]

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

Default Value

[]

currentPoint

currentPoint: Vector2

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

Default Value

new THREE.Vector2()

curves

curves: Curve<Vector2>[]

The array of Curves.

Default Value

[]

autoClose

autoClose: boolean

Whether or not to automatically close the path.

Default Value

false

arcLengthDivisions

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.

Default Value

200

Remarks

Expects a Integer

Methods

extractPoints

  • extractPoints(divisions): {
        shape: Vector2[];
        holes: Vector2[][];
    }

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

    Parameters

    • divisions: number

      The fineness of the result. Expects a Integer

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

getPointsHoles

  • getPointsHoles(divisions): Vector2[][]

  • 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[][]

absarc

  • absarc(aX, aY, aRadius, aStartAngle, aEndAngle, aClockwise?): this

  • Adds an absolutely positioned THREE.EllipseCurve | EllipseCurve to the path.

    Parameters

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

    Returns this

absellipse

  • absellipse(aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise?, aRotation?): this

  • Adds an absolutely positioned THREE.EllipseCurve | 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

arc

  • arc(aX, aY, aRadius, aStartAngle, aEndAngle, aClockwise?): this

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

    Parameters

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

    Returns this

bezierCurveTo

  • bezierCurveTo(aCP1x, aCP1y, aCP2x, aCP2y, aX, aY): 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

ellipse

  • ellipse(aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise?, aRotation?): this

  • Adds an THREE.EllipseCurve | 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

lineTo

  • lineTo(x, y): this

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

    Parameters

    • x: number

      Expects a Float

    • y: number

      Expects a Float

    Returns this

moveTo

  • moveTo(x, y): this

  • Move the .currentPoint to x, y.

    Parameters

    • x: number

      Expects a Float

    • y: number

      Expects a Float

    Returns this

quadraticCurveTo

  • quadraticCurveTo(aCPx, aCPy, aX, aY): 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

setFromPoints

  • setFromPoints(vectors): this

  • Points are added to the curves array as THREE.LineCurve | LineCurves.

    Parameters

    Returns this

splineThru

  • splineThru(pts): this

  • Connects a new THREE.SplineCurve | SplineCurve onto the path.

    Parameters

    Returns this

add

  • add(curve): void

  • Add a curve to the .curves array.

    Parameters

    Returns void

closePath

getPoint

  • getPoint(t, optionalTarget?): Vector2

  • 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

getCurveLengths

  • getCurveLengths(): number[]

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

    Returns number[]

getPoints

  • getPoints(divisions?): 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[]

    Remarks

    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 THREE.LineCurve | LineCurve, the returned number of points is always just 2.

getSpacedPoints

  • getSpacedPoints(divisions?): 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[]

getPointAt

  • getPointAt(u, optionalTarget?): 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

getLength

  • getLength(): number

  • Get total Curve arc length.

    Returns number

getLengths

  • getLengths(divisions?): number[]

  • Get list of cumulative segment lengths.

    Parameters

    • Optionaldivisions: number

      Expects a Integer

    Returns number[]

updateArcLengths

  • updateArcLengths(): void

  • Update the cumulative segment distance cache

    Returns void

    Remarks

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

getUtoTmapping

  • getUtoTmapping(u, distance): number

  • 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.

    Remarks

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

getTangent

  • getTangent(t, optionalTarget?): 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

    Remarks

    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.

getTangentAt

  • getTangentAt(u, optionalTarget?): Vector2

  • 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

computeFrenetFrames

  • computeFrenetFrames(segments, closed?): {
        tangents: Vector3[];
        normals: Vector3[];
        binormals: Vector3[];
    }

  • Generates the Frenet Frames

    Parameters

    • segments: number

      Expects a Integer

    • Optionalclosed: boolean

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

    Remarks

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

clone

  • clone(): this

  • Creates a clone of this instance.

    Returns this

copy

  • copy(source): this

  • Copies another Curve object to this instance.

    Parameters

    Returns this

toJSON

  • toJSON(): {}

  • Returns a JSON object representation of this instance.

    Returns {}

    fromJSON

    • fromJSON(json): this

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

      Parameters

      • json: {}

        Returns this

      Settings

      Member Visibility

      On This Page

      Constructors
      Properties
      Methods