CubicBezierLine

<CubicBezierLine /> renders a <Line2 /> between start and end points, with additional 2 control points.

Usage

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

<template>
  <TresLeches />
  <TresCanvas clear-color="#4f4f4f">
    <TresPerspectiveCamera :position="[0, 4, 0]" />
    <CubicBezierLine
      :start="[-1, 0, 0]"
      :end="[1, 0, 0]"
      :midA="[-1, 2, -2]"
      :midB="[1, 2, 2]"
      :line-width="10"
      color="#82dbc5"
    />
    <TresGridHelper />
    <OrbitControls />
  </TresCanvas>
</template>

Props

<CubicBezierLine /> inherits all props but points from <Line2 />.

Prop	Type	Description	Default
start	Vector3 | [number, number, number]	Starting point
end	Vector3 | [number, number, number]	Ending point
midA	Vector3 | [number, number, number]	First control point
midB	Vector3 | [number, number, number]	Second control point
segments	number	Number of segments in the resulting curve (higher = smoother)	20