-
Notifications
You must be signed in to change notification settings - Fork 625
/
CubicBezierLine.tsx
28 lines (25 loc) 路 1.09 KB
/
CubicBezierLine.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import * as React from 'react'
import { CubicBezierCurve3, Vector3 } from 'three'
import { Line2 } from 'three-stdlib'
import { Line, LineProps } from './Line'
type Props = Omit<LineProps, 'points' | 'ref'> & {
start: Vector3 | [number, number, number]
end: Vector3 | [number, number, number]
midA: Vector3 | [number, number, number]
midB: Vector3 | [number, number, number]
segments?: number
}
export const CubicBezierLine = React.forwardRef<Line2, Props>(function CubicBezierLine(
{ start, end, midA, midB, segments = 20, ...rest },
ref
) {
const points = React.useMemo(() => {
const startV = start instanceof Vector3 ? start : new Vector3(...start)
const endV = end instanceof Vector3 ? end : new Vector3(...end)
const midAV = midA instanceof Vector3 ? midA : new Vector3(...midA)
const midBV = midB instanceof Vector3 ? midB : new Vector3(...midB)
const interpolatedV = new CubicBezierCurve3(startV, midAV, midBV, endV).getPoints(segments)
return interpolatedV
}, [start, end, midA, midB, segments])
return <Line ref={ref as any} points={points} {...rest} />
})