How do you get a point along a bezier line? #2049

vladinator1000 · 2024-07-24T04:59:48Z

vladinator1000
Jul 24, 2024

Hey folks, I have this component

import { Line2Props, QuadraticBezierLine } from '@react-three/drei'
import { ComponentProps, Ref, forwardRef } from 'react'

export type CableRefProps = {
  cableRef: Ref<Line2Props>
}

export let Cable = forwardRef<
  Line2Props,
  ComponentProps<typeof QuadraticBezierLine>
>(({ start, mid, end }, ref) => {
  return (
    <QuadraticBezierLine
      start={start}
      mid={mid}
      end={end}
      ref={ref}
    />
  )
})

I want to animate another component along it, but the ref doesn't have a getPointAt method. How would you get a point along the line using the ref here?

export function FanMoneyBadge({
  position,
  amount,
  currency,
  animate,
  cableRef,
}: FanMoneyBadgeProps) {
  return (
    <motion.group
      animate={animate}
      variants={{
        [TicketSplitsAnimation.BuyTickets]: {
          x: 0,
          y: [cableRef.getPointAt(0), cableRef.getPointAt(0.5), cableRef.getPointAt(1)], // How do you do this?
          z: 0,
          transition: {
            scale: { duration: 1, ease: 'anticipate' },
          },
        },
      }}
    >
      <Html position={position}>
// ...
      </Html>
    </motion.group>
  )
}

This is how my bezier line ref looks in the console

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How do you get a point along a bezier line? #2049

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

How do you get a point along a bezier line? #2049

vladinator1000 Jul 24, 2024

Replies: 0 comments

vladinator1000
Jul 24, 2024