Create a squared link that connects two objects on a grid

[birdblue0311]

I was playing with some open-source code recently, trying to create links between objects on a grid. What I do want however is for the links not to be straight lines between the objects, but instead to be “squared” like on draw.io for example (the second screenshot below).

I tried to do the following:

1. Get the start and the end of the line
2. Find the grid position of the object that we need to connect to
3. Depends where it is it’s position, start drawing the line moving either horizontally or vertically

This somehow feels like an overkill approach. Is there an easier way, a plugin, an example, a library or anything really to achieve the “squared” links like on draw.io?

Thanks.

What I currently have:

What I want to achieve:

[hofk]

The point where the arrow bends at right angles is trivial to determine and not overkill.

[hofk]

Curved arrows are also no problem.

From the Collection of examples from discourse.threejs.org

CurvedArrowWithTip

ArrowLinesFat

[birdblue0311]

Thanks a lot hofk, a great source of gems there! I’m probably overthinking this (got into Threejs not long ago). I would probably implement a simple algo that would:

1. Get the position (x, y) of the start and the end of the line
2. Calculate a “midpoint” cell on the grid where the line should break (there could be multiple “midpoints” in some cases)
3. Start drawing the line through the midpoint(s)

Hopefully that’s what you also thought of?

Also since the grid in Threejs seems to be just LineSegments, I probably expected that there is some built-in way to do this ie. to connect objects with a link that considers the grid cells.

[anidivr]

Try three-flow: Diagramming library for adding to a threejs scene

The basic example shows how to set and change snap-to-grid

[birdblue0311]

Oh wow! Thanks a lot @anidivr, this answers most of my questions actually! Marked as a solution.

Wishing you a great start of the new year ahead!