Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface Shape

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.

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

Examples

geometry / shapes | geometry / extrude / shapes | geometry / extrude / shapes2

Hierarchy

Index

Constructors

constructor

Properties

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 is 200.

default

200

autoClose

autoClose: boolean

Whether or not to automatically close the path.

default

false

currentPoint

currentPoint: I3JS.Vector2

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

default

new THREE.Vector2()

curves

curves: I3JS.Curve<I3JS.Vector2>[]

The array of Curves.

default

[]

holes

holes: I3JS.Path[]

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

default

[]

type

type: string
default

'Shape'

uuid

uuid: string

UUID of this instance. This gets automatically assigned, so this shouldn't be edited.

Methods

absarc

  • absarc(aX: number, aY: number, aRadius: number, aStartAngle: number, aEndAngle: number, aClockwise: boolean): I3JS.Shape
  • Adds an absolutely positioned EllipseCurve to the path.

    Parameters

    • aX: number

      The absolute center of the arc.

    • aY: number

      The absolute center of the arc.

    • aRadius: number
    • aStartAngle: number

      The start angle in radians.

    • aEndAngle: number

      The end angle in radians.

    • aClockwise: boolean

      Sweep the arc clockwise. Defaults to false.

    Returns I3JS.Shape

absellipse

  • absellipse(aX: number, aY: number, xRadius: number, yRadius: number, aStartAngle: number, aEndAngle: number, aClockwise: boolean, aRotation: number): I3JS.Shape

add

arc

  • arc(aX: number, aY: number, aRadius: number, aStartAngle: number, aEndAngle: number, aClockwise: boolean): I3JS.Shape

bezierCurveTo

  • bezierCurveTo(aCP1x: number, aCP1y: number, aCP2x: number, aCP2y: number, aX: number, aY: number): I3JS.Shape

clone

closePath

  • closePath(): void

computeFrenetFrames

copy

ellipse

  • ellipse(aX: number, aY: number, xRadius: number, yRadius: number, aStartAngle: number, aEndAngle: number, aClockwise: boolean, aRotation: number): I3JS.Shape

extractPoints

fromJSON

getCurveLengths

  • getCurveLengths(): number[]

getLength

  • getLength(): number

getLengths

  • getLengths(divisions?: number): number[]

getPoint

  • Parameters

    Returns I3JS.Vector2

    Returns an array of points representing a sequence of curves. 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.

getPointAt

  • Parameters

    • u: number

      A position on the curve according to the arc length. Must be in the range [ 0, 1 ].

    • Optional optionalTarget: I3JS.Vector2

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

    Returns I3JS.Vector2

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

getPoints

getPointsHoles

getSpacedPoints

getTangent

  • Parameters

    • t: number

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

    • Optional optionalTarget: I3JS.Vector2

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

    Returns I3JS.Vector2

    Returns a unit vector tangent at t. 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

  • Parameters

    • u: number

      A position on the curve according to the arc length. Must be in the range [ 0, 1 ].

    • Optional optionalTarget: I3JS.Vector2

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

    Returns I3JS.Vector2

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

getUtoTmapping

  • getUtoTmapping(u: number, distance: number): number
  • Given u in the range ( 0 .. 1 ), returns t also in the range ( 0 .. 1 ). u and t can then be used to give you points which are equidistant from the ends of the curve, using .getPoint.

    Parameters

    • u: number
    • distance: number

    Returns number

lineTo

moveTo

quadraticCurveTo

  • quadraticCurveTo(aCPx: number, aCPy: number, aX: number, aY: number): I3JS.Shape

setFromPoints

splineThru

toJSON

  • toJSON(): object

updateArcLengths

  • updateArcLengths(): void

Generated using TypeDoc