What's the proper way to customize native gizmos?

Questions
1

Hi there, folks:

I’m trying to adapt some aspects of the native BJS Rotation Gizmo to my needs. Apparently, all very simple, but I can’t get rid of it.

Please, look at this PR. Ask you can see, my attempts to set the ring colour, at normal and hover states, via the following two code lines has been unfortunate:

...
_gizmoManager.gizmos.rotationGizmo.yGizmo.coloredMaterial.diffuseColor = new BABYLON.Color3(.4, .4, .4);
_gizmoManager.gizmos.rotationGizmo.yGizmo.hoverMaterial.diffuseColor = new BABYLON.Color3(.5, .5, .5);
...

Please note that even you can see some greenish (original colour) shade through it:

However, the rotation colour is working as expected.

I’d like also to update the toroid that is used here as the ring mesh. For example, its thickness. I supposed it could be done by means of IPlaneRotationGizmo._rootMesh member, but is not working at all.

Thanks in advance for your thoughts and time.

2

Hi,

To fix the color issue, you also need to set coloredMaterial.specularColor.

You can change the toroid thickness in the GizmoManager constructor (it is the second parameter).

You may also just use the PlaneRotationGizmo constructor instead—it offers more customization options (toroid tessellation, for example). Babylon.js Playground

3

Good afternoon, @fuyutami:

I’m testing the approach you’re recommending me and let you know about it.

Thank you very much for your hints.

4

Good evening, @fuyutami:

After having a look at your PR, I see that PlaneRotationGizmo is intended to be used in a “per only one mesh” basis (by means of gizmoRotateY.attachedMesh = boxie). Gizmo is also shown all the time, not only from the moment the user click on the mesh (more convenient behaviour).

For my uses, that is not as convenient as GizmoManager, where I can attach all my meshes with a unique call (_gizmoManager.attachableMeshes = [boxie1, boxie2];) that I think could be more performant also, as you can see in this new PR.

With that code snippet, I’ve finally accomplished the following native-gizmo customizing aspects:

  • tweak of the ring thickness, thanks to the GizmoManager’s constructor second parameter;
  • occlusion of the rotation gizmo by means of the third constructor parameter;
  • dragging notification using the onDragEndObservable API.

The only thing I can’t find how to implement is the toroid tessellation, but certainly I can live with the default one.

Best regards.

5

When not using the GizmoManager, you would have to handle attaching the gizmo yourself. For example, you could do something like this: Babylon.js Playground

I tried customizing gizmos myself before and found the GizmoManager limiting, so ultimately, I preferred making my own manager. But if the default manager works for your needs, that’s excellent.

I’m glad to hear you resolved the issue.