What the best way to do a "magnetic" line or expand the event area?


I’m working on my first babylon project and i would like increase some points.

A user can draw a line between two points and when he drag his mouse over line a popup is shown with some properties.

Basically each time user click, i create a sphere with MeshBuilder.CreateSphere and after i create a line with MeshBuilder.CreateLines. Meshes have a register action with OnPointerOverTrigger. The popup is made with babylon GUI (rectangle, stackpanel etc.)

No problem with that but the line event mouse area is not enough wide so it’s difficult to show the popup. It’s a pixel perfect.

In a previous silverlight 2d project i resolve this problem with a second wider transparent line which capture the event.

I don’t know what is the best solution to expand the event capture area in babylon (blue area in the image).
My first stupid idea would be to use the same trick like above but i am convinced it’s not the solution.

Do i need to use a wider bounding box arround the line mesh or any other solution ?


Thank you and apologies for my english :disappointed:

Hi @nanney54 and welcome to the forum. Just a suggestion but you could use a cylinder for your line or surround your line with a transparent cylinder and set your event on the cylinder.

1 Like

Thx, i will try like that.

So after working on it, i made a sample of my solution here

In the first attempt i used a cylinder to surround the line, it works like a charm but when i refactored my code i discovered MeshBuilder.CreateTube which do the same thing better.

In the first solution the result is broken if i change the two vectors origin to:
let startPoint = new BABYLON.Vector3(2,2,2);
let endPoint = new BABYLON.Vector3(1,1,1);

Can you explain to me why ?

1 Like

Hi N! I can’t explain why… but I can offer a fix.


Lines 40-75 is a cylinderBetweenPoints function, as you can see. I don’t know who coded it.

I call it in line 98, using your 2,2,2 and 1,1,1 points. Seems to work ok. I didn’t re-activate your pointer picking/actionManager… sorry. :slight_smile:

Note: A semi-new parameter is the false at the end of line 53. It is optional and defaults to true… and in your case, it needs to be false. That parameter dictates whether/not the mesh position is changed… just after the setPivotMatrix call.

I think I can use some info found in cylinderBetweenPoints()… for another project I am working-on, so thank you for helping me find that famous function and study it. I think it will be useful for BOTH of us.

A little secret: Most people who have worked-with these “between points” operations… have used the word vend in their playgrounds/experiments. SO… a playground search for ‘vend’… returns many useful playgrounds.

I hope this is helpful. Stay tuned for more/wiser comments… some could answer “why” for us. :slight_smile:

BABYLON.Vector3.Cross(centerPoint, axis1);

Only by chance will this produce a vector perpendicular to your line.

You are best to stick to CreateTube, much easier to get the tube where you want it than a cylinder. Well found :slightly_smiling_face: