How to change the Gizmo size?

[AlessandroSigna]

Hi all! Is it possible to change the size of the Gizmo? I'm using the GizmoViewcube but I can't figure out a way to do it.
I tried using a scale: Vector3 prop of the GizmoHelper but it didn't work.
Any help?
Thanks!!

[RadithSandeepa]

Hi! To change the size of the GizmoViewcube in GizmoHelper, you can try using the setScale method.

Here's an example approach:

  const gizmoHelper = new GizmoHelper({
  ...
});

gizmoHelper.setScale(new Vector3(2, 2, 2)); // Example scale value

[AlessandroSigna]

Many thanks for the reply Radith!
Unfortunately I was not able to follow your advice.

My situation is this

<GizmoHelper
   alignment="top-right"
   margin={[100, 100]}
   >
          <GizmoViewcube
            color={"#4F5863"}
            hoverColor={"#53B7E8"}
            textColor={"white"}
            strokeColor={"#53B7E8"}
          />
</GizmoHelper>

And I was not able to convert it in functions, as you described

Thanks

[AlessandroSigna]

I've managed to achieve the resize of GizmoViewCube by wrapping it into a scaled element:

<GizmoHelper
   alignment="top-right"
   margin={[100, 100]}
   >
     <mesh scale={new Vector3(.8, .8, .8)}>
          <GizmoViewcube
            color={"#4F5863"}
            hoverColor={"#53B7E8"}
            textColor={"white"}
            strokeColor={"#53B7E8"}
          />
      </mesh>
</GizmoHelper>