Skip to content

useTriangle

Composable for working with triangles.

useTriangle({base: 240, height: 100})

Configuration

NOTE

useTriangle provides a regular triangle calling usePolygon({sides: 3}). If you want to define a more complex triangle, try usePolygon({vertices}) to pass vertices directly.

PropertyDefaultDescription
sideLength100The length of each side (optional).
size0Fit the shape to a circumscribed circle of a given diameter (optional).

TIP

When defining any regular polygon, you can specify either sideLength or size. If you define both, size will take precedence, and is defined as the diameter of the circumscribed circle around the polygon.

extends Primitive Configuration

The following configuration parameters are applicable to all primitive shapes.

PropertyDefaultDescription
position{ x: 0, y: 0 }A 2D vector representing the position of the primitive.
rotation0The rotation of the primitive (in degrees).
scale1The scale factor of the primitive.

Usage

ts
import { useTriangle } from 'vuexyz'

const size = ref(200)
const position = ref({ x: 0, y: 0 })
const { vertices, edges, faces } = useTriangle({ size, position })

Returns

All primitive shapes return the following reactive members:

PropertyType DeclarationDescription
verticesComputedRef<Vertex[]>An array of all vertices.
edgesComputedRef<Edge[]>An array of all edges.
facesComputedRef<Face[]>An array of all faces.
centroidComputedRef<Vertex[]>The centroid (geometric center) of all vertices.
boundingBoxComputedRef<BoundingBox>The bounding box of the primitive, with properties x, y, width, height, maxX and maxY
svgPathComputedRef<string>An SVG path representing the shape of the primitive.
drawToCanvas(ctx: CanvasRenderingContext2D) => voidA method that draws the primitive to a canvas context.
threeShapeComputedRef<THREE.Shape>A THREE.Shape object representing the primitive's 2D face. Only applicable with closed shapes.
threeCurvePathComputedRef<THREE.CurvePath>A THREE.CurvePath object representing the primitive's 2D edges. Can be used in three and tres.

Released under the MIT License.