Shape vs. Path vs. Curve?

Questions
1

Can someone explain - in layman’s terms - the difference between Shapes, Paths and Curves?

Of particular interest:

can one easily convert one into the other like:

Shape.FromCurve( curve )

or similar?

2

  1. Curve
    An abstract class for creating curves. It can be 2D (using Vector2) or 3D (using Vector3). You can extend this class to create custom curves. The built-in curve types are:

  2. CurvePath
    A container for multiple Curve objects, supporting both 2D and 3D curves. It provides the same methods as Curve but works with sequences of curves.

  3. Path
    A 2D version of CurvePath, designed to mimic the Canvas API (moveTo, lineTo, etc.).

  4. ShapePath
    Creates an array of paths and converts them into a series of Shape objects. It’s mainly used with the SVGLoader.

  5. Shape
    A 2D class that extends Path, designed to work with ExtrudeGeometry and ShapeGeometry. Supports holes within the shape.

  6. ExtrudeGeometry & ShapeGeometry
    Both geometries take a Shape as input along with optional parameters to control the geometry.

  7. ShapeUtils
    A collection of utility functions for working with shapes.

image
image355×134 5.74 KB

To answer your question:

  • Shape is a Path with added support for holes, mainly used to create the final geometry.
  • Path is a 2D CurvePath with support for canvas-like methods (moveTo, lineTo, etc.).
  • CurvePath is essentially an array of 2D Curve objects.

To create a shape, you can either use the canvas-like API:

const shape =  new  THREE.Shape(); 
shape.moveTo(100,  0); 
shape.lineTo(100,  100); 
shape.arcTo(50,  50,  0,  100,  50);
shape.closePath();

Or add a series of Curve objects:

const shape = new THREE.Shape();
shape.moveTo(100, 0);
shape.add(new THREE.LineCurve(new THREE.Vector2(100, 0), new THREE.Vector2(100, 100)));
shape.add(new THREE.QuadraticBezierCurve(
    new THREE.Vector2(100, 100),
    new THREE.Vector2(50, 50),
    new THREE.Vector2(0, 100)
));
shape.add(new THREE.LineCurve(new THREE.Vector2(0, 100), new THREE.Vector2(100, 0)));
shape.closePath();
6 Likes