Double ended arrow on axis drag gizmo

Questions
1

Hi All-

I have been using axis drag gizmos a lot lately and have been doing one each on opposite sides of the mesh, which is a waste because one gizmo will work in both directions on a particular axis. It’s just nice to be able to grab it from the other side as well, especially if the arrow is on the other side of the mesh.

I looked at the source code and came up with the approach in this playground.

https://playground.babylonjs.com/#7KX2R8#215

The gizmo has 2 transform nodes, one for the arrow and one for the arrow when it is hovered. The transform nodes each have 2 meshes, the arrow shaft and arrow head.

So I cloned the meshes, flipped them around, and attached them to the transform nodes. But the colors don’t transfer, even if I add them by hand.

Any ideas? Is there a simpler way to do this?

I know I can do this: gizmo.setCustomMesh(customMesh) but the direction does not change with the vector and the color does not change.

Thanks-

Flex.

2

Adding @Cedric our gizmo Guru

4

Colors are transfered but the cloned meshes are not associated with the layer lighting. Hence their black color.
Once fixed it looks like this:

double arrow | Babylon.js Playground (babylonjs.com)

The issue is the picking color or the hovering one is not associated. I’m taking a closer look to see how to attach them.

5

I tried to add the cloned meshes into the cache. The solution is very hacky and will break as soon as we change those internal structure:

double arrow | Babylon.js Playground (babylonjs.com)

I’m sure it’s not the way to go. Instead, modifying bot cylinders used for display sounds better. For the axis, try to change its position. and for the arrow end, try to change the geometry data.