Capítulo 759 de 859

Chapter 759: Path

Core Idea

A 2D path representation. The class provides methods for creating paths and contours of 2D shapes similar to the 2D Canvas API.

Key Concepts

  • currentPoint : Vector2: The current offset of the path. Any new curve added will start here.

Code Examples

const path = new THREE.Path();
path.lineTo( 0, 0.8 );
path.quadraticCurveTo( 0, 1, 0.2, 1 );
path.lineTo( 1, 1 );
const points = path.getPoints();
const geometry = new THREE.BufferGeometry().setFromPoints( points );
const material = new THREE.LineBasicMaterial( { color: 0xffffff } );
const line = new THREE.Line( geometry, material );
scene.add( line );
  • What it demonstrates: Typical usage of Path.

Reference Tables

Constructor

Signature
new Path( points : Array.<Vector2> )

Properties

PropertyDescription
.currentPoint : Vector2The current offset of the path. Any new curve added will start here.

Methods

MethodDescription
.absarc( aX : number, aY : number, aRadius : number, aStartAngle : number, aEndAngle : number, aClockwise : boolean ) : PathAdds an absolutely positioned arc as an instance of EllipseCurve to the path.
.absellipse( aX : number, aY : number, xRadius : number, yRadius : number, aStartAngle : number, aEndAngle : number, aClockwise : boolean, aRotation : number ) : PathAdds an absolutely positioned ellipse as an instance of EllipseCurve to the path.
.arc( aX : number, aY : number, aRadius : number, aStartAngle : number, aEndAngle : number, aClockwise : boolean ) : PathAdds an arc as an instance of EllipseCurve to the path, positioned relative to the current point.
.bezierCurveTo( aCP1x : number, aCP1y : number, aCP2x : number, aCP2y : number, aX : number, aY : number ) : PathAdds an instance of CubicBezierCurve to the path by connecting the current point with the given one.
.ellipse( aX : number, aY : number, xRadius : number, yRadius : number, aStartAngle : number, aEndAngle : number, aClockwise : boolean, aRotation : number ) : PathAdds an ellipse as an instance of EllipseCurve to the path, positioned relative to the current point
.lineTo( x : number, y : number ) : PathAdds an instance of LineCurve to the path by connecting the current point with the given one.
.moveTo( x : number, y : number ) : PathMoves Path#currentPoint to the given point.
.quadraticCurveTo( aCPx : number, aCPy : number, aX : number, aY : number ) : PathAdds an instance of QuadraticBezierCurve to the path by connecting the current point with the given one.
.setFromPoints( points : Array.<Vector2> ) : PathCreates a path from the given list of points. The points are added to the path as instances of LineCurve.
.splineThru( pts : Array.<Vector2> ) : PathAdds an instance of SplineCurve to the path by connecting the current point with the given list of points.

Key Takeaways

  1. Path extends: Curve → CurvePath
  2. Most relevant properties: currentPoint.
  3. Key methods: absarc, absellipse, arc, bezierCurveTo.

Connects To