THREE.QuadraticBezierCurve3 vs drei/QuadraticBezierLine

Does any know how to make a control point in bezier line in three/drei? Seems like it does provide a mid param but somehow it does not take effect.
https://codesandbox.io/p/sandbox/three-quadraticbeziercurve3-vs-drei-quadraticbezierline-forked-v6ht7c?file=%2Fsrc%2FApp.js%3A24%2C47-24%2C60

Thanks.

What version of Drei is this?

Have you tried with the latest Drei version?

1 Like

your box is private, can’t see it. but there isnt much to that component, its a very light abstraction around line2 + qbezier. mid point is v1 in qbezier and you should be able to just set it. if you omitt it it gets auto calculated. it might help to look into the source drei/src/core/QuadraticBezierLine.tsx at bd85440d0bd92b05be0d9646d1ac41082aa62fe3 · pmndrs/drei · GitHub

<QuadraticBezierLine start={[0, 0, 0|} end={[1, 0, 0]} mid={[0.5, 0.5, 0]} />

or

ref.current.setPoints([0, 0, 0|, [1, 0, 0], [0.5, 0.5, 0])
...
<QuadraticBezierLine ref={ref} />
1 Like

Hi,
Turned the box public.
Thank you for your input!
Upgrating solved the issue.