@threlte/extras

<MeshLineGeometry>

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

<script lang="ts">
  import { Canvas } from '@threlte/core'
  import Scene from './Scene.svelte'
</script>

<div class="w-full h-full relative">
  <Canvas>
    <Scene />
  </Canvas>
</div>

<script>
  import { T } from '@threlte/core'
  import { Grid, MeshLineGeometry, MeshLineMaterial, OrbitControls } from '@threlte/extras'
  import { CatmullRomCurve3, Vector3 } from 'three'

  // create a smooth curve from 4 points
  const curve = new CatmullRomCurve3([
    new Vector3(-3, 0, 0),
    new Vector3(-1, 1, -1),
    new Vector3(1, -1, 1),
    new Vector3(3, 0, 0)
  ])

  // convert curve to an array of 100 points
  const points = curve.getPoints(100)
</script>

<T.Mesh
  position.y={3}
  scale={2}
>
  <MeshLineGeometry
    {points}
    shape="taper"
  />

  <MeshLineMaterial color="#fe3d00" />
</T.Mesh>

<T.PerspectiveCamera
  makeDefault
  on:create={({ ref }) => {
    ref.position.set(10, 3, 10)
  }}
>
  <OrbitControls
    autoRotate={true}
    autoRotateSpeed={2}
    enableDamping
    target.y={2}
  />
</T.PerspectiveCamera>

<Grid
  gridSize={[10, 10]}
  cellColor={'#46536b'}
  sectionThickness={0}
/>

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.

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>