Connect two elements with a Bezier line

[lunar616]

Hello. I need to learn how to connect two elements with a Bezier line on a 2D plane.

I tried to do it this way:

const curve = new CubicBezierCurve(
  // Vector2 of the first element
  // Here I have problems
  // Here I have problems
  // Vector2 of the second element
);

const geometry = new BufferGeometry().setFromPoints(curve.getPoints(50));
const material = new LineBasicMaterial({ color: 0xff0000 });
const line = new Line(geometry, material);

scene.add(line);

Also I have some code that updates the positions when moving my elements.

My problem is to calculate an acceptable formula for Bezier. I need something like here:

ThreeJS playground

Or like:

NodeToy

Also, no matter what parameters I passed with the second and third arguments when creating CubicBezierCurve, when moving my elements, the middle of the line somehow sticks to the center of the scene:

I’ll be glad if someone tells me how I can achieve the solution of my task. How do I get a similar formula on ThreeJS playground or NodeToy? Thank you!

[PavelBoytchev]

A cubic Bézier curve is defined by 4 points – two end points and two control points between them. In the illustration points A and D are the end points, while B and C are the control points. As a code, it look like this:

const curve = new CubicBezierCurve(
  // Vector2 of A,
  // Vector2 of B,
  // Vector2 of C,
  // Vector2 of D
);

When you move the nodes, you have to change the points in this way:

• Point A is attached to the right egde of the left block
• Point B is to the right of A (same vertical position, but horizontally slightly to the right of A)
• Point C is to the left of D (same vertical position, but horizontally slightly to the left of D)
• Point D is attached to the left edge of the right block

The illustration below shows how the points are moved when one of the blocks is moved.

[lunar616]

Thank you very much! It really helped me!