Expandable lines

How to expand 3d lines when I click and drag in one end.

that’s quite an abstract question.

Would you be able to reproduce a scene you want to change? target your question a bit to help us understand what exactly you are referring to?

My scenario is linking two mesh with lines in 3D. If I move one mesh that linked line should need to expand. Is this clear?

I Create a line using,
BABYLON.Meshbuilder.CreateLines()

And I can’t able to get line points after creation, for change points to expand lines

1 Like

You should be able to get and set the vertices data as you can for other meshes: Updating Vertices | Babylon.js Documentation

2 Likes

This very simple PG may help to get linePoints - https://playground.babylonjs.com/#JWETXJ#4

2 Likes

If you want to make the line longer, you can for example update the points array and call CreateLines() again to update the line length, like this :slightly_smiling_face:

https://playground.babylonjs.com/#MZ7QRG#796

2 Likes

@labris I like your example connecting the meshes with lines when they’re clicked, but an issue is that it’s actually creating a new mesh each time without disposing of the old ones, since the existing mesh isn’t passed as the instance option. Also, the number of points can’t change when updating existing lines, only their positions can change. This can be verified via the inspector. :face_with_monocle:

But here is an updated example that properly disposes the old mesh before creating the new one with more points. :slightly_smiling_face:

https://playground.babylonjs.com/#JWETXJ#21

1 Like

@labris If I drag the mesh then line should update its points in runtime. Is it possible?

1 Like

@Blake I need that line should expand in runtime.

1 Like

Ooh, I gotcha now I think, here’s a simple example of updating the connecting line each time one of the mesh endpoints is dragged. :slightly_smiling_face:

https://playground.babylonjs.com/#YEZPVT#837

Edit, it’s a little easier to just use the same position object for the meshes and line points, without the need to keep track of the index. :+1:
https://playground.babylonjs.com/#YEZPVT#839

Ooh, one more edit, here’s a smoother version that fixes the issue of the line not updating right away when the mesh is dragged, by updating the line in the position validator instead of using the onDrag observable. It’s a little hacky since it’s not the intended usage of the validator, but the validator fires before rendering while onDrag fires afterwards, so it seems to works better in this case IMO. :sweat_smile:
https://playground.babylonjs.com/#YEZPVT#840

4 Likes

Lines and LineSystem are parametric meshes, so probably expandable in the way you want

1 Like

Drag Validator does the trick :slight_smile:
Really nice solution and it is possible to use any number of meshes - https://playground.babylonjs.com/#YEZPVT#850
I was curious about how long the line is so I added some position GUI markers - https://playground.babylonjs.com/#YEZPVT#849

There is also another drag implementation described in docs. From it I made this example - https://playground.babylonjs.com/#7CBW04#708
When I did the same with the tube I also added animation for donuts delivery :slight_smile: - https://playground.babylonjs.com/#7CBW04#710

The effect was quite interesting, so I added some GLTF models, skybox, shadows, highlighting for picking wachtowers and, of course, some particles :slight_smile:

Drag watchtowers in the top left viewport and see what happens in other views (Follow cam and 2 target cameras) - https://playground.babylonjs.com/#7CBW04#707

3 Likes