@threlte/extras

<MeshLineGeometry>

Used in combination with <MeshLineMaterial> to create a line formed of a strip of billboarded triangles, based on THREE.MeshLine.

Usage

This component works by taking an array of points to form a line geometry without any thickness, which is then projected and expanded in screen space by <MeshLineMaterial>. Both <MeshLineMaterial> and <MeshLineGeometry> need to be the children of the same parent mesh.

Example

<script>
  const points = [new Vector3(-1, 1, -1), new Vector3(0, 1, 0), new Vector3(1, 1, 1)]
</script>

<T.Mesh>
  <MeshLineGeometry {points} />
  <MeshLineMaterial
    width={0.5}
    color="#fe3d00"
  />
</T.Mesh>

Points

The points property is required and accepts an array of THREE.Vector3 objects. The points property is reactive and you can animate the line by updating the positions of the Vector3 objects within the array.

When updating the points array you must ensure the updated array is the same length as the initial array, otherwise the points will not update. In other words you can alter the position of points in the array but you cannot add or remove points.

Shape

By default the line will be a constant thickness along it’s length, at a width defined in <MeshLineMaterial>. To create a line that tapers down to a point at each end you can set the shape property to 'taper'.

For more control over the shape of the line you can set the shape property to 'custom' and pass a custom function to the shapeFunction property.

The function will define the width at each point along the line, for example p => 2 will make the line double the width. The property p is the percentage of the number of points, i.e. for point 200 of 250 points, p = 0.8. For example the following code will define a line that tapers off at one end:

<T.Mesh>
  <MeshLineGeometry
    {points}
    shape={'custom'}
    shapeFunction={(p) => 1 - p}
  />
  <MeshLineMaterial />
</T.Mesh>

Component Signature

<MeshLineGeometry> extends <T.BufferGeometry> and supports all its props, slot props, bindings and events.

Props

name
type
required
default
description
points
THREE.Vector3[]
yes
[]
The array of points that form the line.
shape
'none' | 'taper' | 'custom'
no
'none'
The shape of the line. Use 'custom' to use your own function.
shapeFunction
(p:number) => number
no
p => 1
A function to define the width of each point along the line. For example `p => 1 - p` will make the line taper.
Previous Page <Mask>
Next Page <MeshLineMaterial>