useTriangle
Composable for working with triangles.
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.
Property | Default | Description |
---|---|---|
sideLength | 100 | The length of each side (optional). |
size | 0 | Fit 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.
Property | Default | Description |
---|---|---|
position | { x: 0, y: 0 } | A 2D vector representing the position of the primitive. |
rotation | 0 | The rotation of the primitive (in degrees). |
scale | 1 | The 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:
Property | Type Declaration | Description |
---|---|---|
vertices | ComputedRef<Vertex[]> | An array of all vertices. |
edges | ComputedRef<Edge[]> | An array of all edges. |
faces | ComputedRef<Face[]> | An array of all faces. |
centroid | ComputedRef<Vertex[]> | The centroid (geometric center) of all vertices. |
boundingBox | ComputedRef<BoundingBox> | The bounding box of the primitive, with properties x , y , width , height , maxX and maxY |
svgPath | ComputedRef<string> | An SVG path representing the shape of the primitive. |
drawToCanvas | (ctx: CanvasRenderingContext2D) => void | A method that draws the primitive to a canvas context. |
threeShape | ComputedRef<THREE.Shape> | A THREE.Shape object representing the primitive's 2D face. Only applicable with closed shapes. |
threeCurvePath | ComputedRef<THREE.CurvePath> | A THREE.CurvePath object representing the primitive's 2D edges. Can be used in three and tres . |