How do I get 1 end of a line to follow the mouse cursor?
I can’t quite understand how it would happen as generating a line is done with an array so how do I specify that only 1 point/node must actually follow?
Secondly how do I translate the 2D mouse X and Y into 3D space if the line must move parallel to the ground plane with the camera at an angle?
Hiya W. I think we should start with THIS playground:
https://www.babylonjs-playground.com/#1EBCJY#16
All three “points” can be mouse-dragged… on the X-Z plane. That is a good start, right?
AND, the 3 points are connected by a linesMesh… that uses an updatePath() function… which uses the positions of the 3 points (boxes).
The COOLEST part… line 118. The 5th parameter… is the name of a linesMesh… which was created WAY BACK in line 98. In other words, createLines has a built-in “update an already-existing linesMesh” feature. Nice.
Yes, we are dragging huge boxes, here, but your project will also need “something to drag”… perhaps replacing big boxes with little spheres. I think you will enjoy “drag’n’drop” points… MORE than “attach point to mouse arrow”.
When you keep the “dots” as spheres… they are mesh. Mesh can have actionManagers… which are very powerful event processing engines… mouse-over, mouse-out, click, double-click, right/left/center, etc etc. Each of your line-drawing dots… could have good power.
That playground uses drag-behavior system… but actionManager system is excellent, too.
And here is ANOTHER cool system of mouse-dragging, using scene.onPointerObservable…
https://www.babylonjs-playground.com/#279FW9#35 (dragging not working, not sure why, yet.)
I hope I have been helpful.
@Wingnut awesome, thank you. This will work perfectly. I was worried I was going to have to do something like this: Babylon.js Playground and I really don’t like that solution. It’s very messy.
I will test this out and let you know how it goes. I’m think of having an arrow on the end of the line so that could be my mesh.
Do I have to create a tube if I want the line to be thicker?
My pleasure…I’m glad this worked as a good starter for your project.
I think SOME people have used glowLayers on linesMesh… to make lines appear thicker.
I had a playground that used some glow on linesMesh… https://www.babylonjs-playground.com/#258JTK#13 … but I am having problems loading it… at the moment. Might work for you. A little post about it… here.