Skip to content

CatmullRomCurve3

The cientos package provides a <CatmullRomCurve3 /> component that allows you to make smooth(ish) 3D lines.

<CatmullRomCurve3 /> wraps Three.js's CatmullRomCurve3 functionality, but applies it to Cientos' <Line2 /> under the hood, meaning you can use all the props from <Line2 />.

Usage

vue
<script setup lang="ts">
import { CatmullRomCurve3, OrbitControls } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas clear-color="#4f4f4f">
    <CatmullRomCurve3
      :points="[[-1.5, 0, 0], [-0.5, 1, 0], [0.5, 0, 0], [1.5, 1, 0]]"
      :segments="40"
      :line-width="10"
      color="#fbb03b"
    />
    <TresGridHelper />
    <OrbitControls />
  </TresCanvas>
</template>

Props

PropTypeDescriptionDefault
pointsArray<Vector3 | [number, number, number]>Curve's control points
segmentsnumberNumber of segments in the resulting curve (higher = smoother)20
closedbooleanThe curve will loop back onto itself when this is true.false
curveType'centripetal' | 'chordal' | 'catmullrom'Curve type'centripetal'
tensionnumberCatmullrom's tension, when curveType is 'catmullrom'0.5
vertexColorsTresColor[]Vertex colors, if usingnull
colorTresColorColor for the line – multiplies vertex colors'white'
lineWidthnumberWidth of the line – in world units with size attenuation, pixels otherwise1
worldUnitsbooleanWhether the line width is in world units or pixelsfalse
alphaToCoveragebooleanEnables alpha to coverage. Can only be used with MSAA-enabled contexts (meaning when the renderer was created with antialias parameter set to true).false
dashedbooleanWhether the line is dashedfalse
dashSizenumberDash size1
gapSizenumberGap size in dashed line1
dashScalenumberScale of the dashes/gaps1
dashOffsetnumberDash offset0