Mesh between 2 moving points

Questions
1

I originally asked this question: Create line and make 1 end follow mouse cursor in perspective but since realised it’s not going to work properly. Maybe if I explain what I’m trying to do someone will have another suggestion.

Basically I need some kinda of tube that is fixed on 1 end and on the other follows the “mouse cursor” (even a mesh that is picked with a mesh click is fine as-well). A line is not going to work as I need to add colour/texture and a glow can’t be the only way for the “line” to change colour or have “thickness”.

I need exactly as per this example https://www.babylonjs-playground.com/#1EBCJY#16 that @Wingnut helped me with but a mesh.

It must be able to work with mobile touch move gesture as-well.

2

Hi again, W. https://www.babylonjs-playground.com/#AYHCIP#4

BASIC tube-dragging, but it uses modern BJS dragBehaviors, which is good. (could use old DOM canvas.onPointerMove… which sucks) :slight_smile:

Yeah, I think you will need a little “node” at every tube connection point (to drag-upon)… and I think you will want to “add node” if user clicks-on a previously-drawn tube. And you might want “delete node” on any 2-tube node that could be removed, and tubes connected directly.

You are wanting to make a touch-gesture-driven… tubes’n’nodes “structure editor”. Sort of a plumber’s tool, a tubing routing festival… sounds like fun! Those “nodes” where you connect 2-1000 tubes together at one point in space… THAT’s where you also can switch tube diameters… good for when a 1000 unit resort complex… needs to send all its sewage to that one BIG pipe… that connects to the sewage treatment plant.

Ok, ok, tubes don’t ALWAYS haul sewage. Sometimes they haul BEER!!! YAY!!! :slight_smile:

Wha-da-ya-think, W? A “long touch” on a tube section or node… spawns a new tube/node right there… to start dragging-to and dropping somewhere?

A double touch… tries to delete the node… after answering yes/no to “Are you sure?” question?

(Six degrees of-) DragBehavior is a little “greasy”, too, isn’t it? It senses your camera orientation, and then drags along a certain axis/two… and then when you view from another angle and start dragging there, it uses different axes, right?

Building a touch-powered “tubing structure builder/editor” could be challenging, interesting. Babylon.js Playground Node dragging, breakfast of champions. :slight_smile:

Tube “bending”, you ask? That’s just scary. :slight_smile: https://www.babylonjs-playground.com/#KMJCI#5

3 Likes
3

Thanks I’ve been trying to get this to work but I can’t…

TypeScript is complaining about assigning the 5th parameter radiusFunction to null (@Cedric not sure if this is another bug as I see the function can only be a number, maybe it needs to be radiusFunction: { (i: number, distance: number): number; } | null?) . I get this lint error:

Argument of type ‘null’ is not assignable to parameter of type ‘(i: number, distance: number) => number’

I tried using (): any => { } but no mesh is ever created. I assume if I cannot assign null to the radiusFunction I need to pass in a proper function but I don’t understand how this function works based on the documentation:

The parameter radiusFunction (javascript function, default null) is a vanilla javascript function. If it is not null, it overwrittes the parameter radius

The above doesn’t explain what the function should do or look like for the laymen.

4

As I posted the above I though I’d try () => 2 and it actually worked. The thing that made me understand was the comment in the source (this really should be in the docs):

radiusFunction is a custom function. If it is not null, it overwrittes the parameter radius. This function is called on each point of the tube path and is passed the index i of the i-th point and the distance of this point from the first point of the path

5

I can’t set the params to null in BABYLON.Mesh.CreateTube(null, path, 0.5, null, null, null, null, null, null, edge) as my TypeScript project throws TSLint warnings eg.: Argument of type 'null' is not assignable to parameter of type 'string'.ts(2345) when I try set the name to null. I think without being able to do this it’s trying to create a new mesh on every registerBeforeRender which is killing my frame rate.

6

Yeah, I can’t help much with typeScript stuff. But here’s a playground with TWO radiusFunction’s operating on two “live tubes”. (whatever a ‘live tube’ is) :slight_smile:

https://www.babylonjs-playground.com/#1XA063#4

It’s not my playground. I just found it via playground search for radiusFunction.

If you activate lines 235 and/or 239, you can see (at console) that custom radius functions… sometimes run very fast and continuously. It is a function… that returns a “radius value”… (which you can step-program) at every step in the tube’s path (if done properly). Tube radius can change on-the-fly this way (as seen for the two “funneling” tubes in this demo).

Custom radius functions are pretty cool and powerful. As you can see, the actual functions are often rather simple. But yeah, could be typeScript trouble. Stay tuned for other helpers… for that.

7

About TS, you can directly use TubeBuilder.CreateTube instead as will be more flexible and prevent to write all the null

1 Like
8

@sebavan awesome thanks that helped with being able to set null.

2 Likes
10

Just wanna say thanks for all the patience and help. It has been a tough and frustrating week getting this working but it’s finally doing what I needed it to. Hopefully in the upcoming months I’ll be able to showcase the game I’m working on :grinning:

Kudos to @Wingnut @Cedric @sebavan @Deltakosh

Hopefully I can eventually help others and not just ask for help :laughing:

3 Likes
11

@Wingnut I’ve run into another problem now. I can’t dispose the mesh based on an event: https://www.babylonjs-playground.com/#AYHCIP#6

How do I cancel the onBeforeRenderObservable or in my case registerBeforeRender? I assume the reason I can’t dispose is that the mesh is being recreated so quickly in the loop that the reference is lost at the time the dispose fires…

I actually want to destroy the mesh and cancel the loop to garbage collect as it won’t be needed anymore in my use-case.

12

https://www.babylonjs-playground.com/#AYHCIP#8

Lines 77-78… see how I gave the “add” a name? (fred)

Up in line 73, we use that name… to do a “remove”. After 5 secs, tube gone. :slight_smile:
Maybe in line 73, the removal should happen BEFORE the edge.dispose(). Probably. :slight_smile:

Should work. Party on. Thx for the kind words for the helpers… much appreciated… glad we were useful to you.

2 Likes
13

Awesome, thanks again! :confounded:

1 Like