Changing rotation handle shape

I want to change rotation handle shape or texture, like red arrows in image bellow. please help me!

I’m making the assumption that you want to modify the rotation gizmos of TransformControls. If this is true, you might need to modify the source code, especially gizmoRotate, helperRotate and/or pickerRotate. This is just a guess. I have never done this.

const gizmoRotate = {
	XYZE: [ [ new Mesh( CircleGeometry( 0.5, 1 )...] ], 
	X: [ [ new Mesh( CircleGeometry( 0.5, 0.5 )...] ],
	Y: [ [ new Mesh( CircleGeometry( 0.5, 0.5 )...] ],
	Z: [ [ new Mesh( CircleGeometry( 0.5, 0.5 )... ] ],
	E: [ [ new Mesh( CircleGeometry( 0.75, 1 )... ] ] 

const helperRotate = {...}

const pickerRotate = {...}

Yes. you right. i want convert default green circle in image bellow to a beautiful Alternative, like red arrows in image above.
Thanks. but your code is not complete. and not helps me.

This is because you don’t want to help the others to understand how to help you.
Is there any chance that you provide the code you are using in order to achieve the results shown above? And you might put more details in the description of what you are doing, what you have and what you want to get?

1 Like

The source code that I posted is an extract of the source code of TransformControls. It is only to help you identify what part of the source you might have to change. Treat it as a pointer to a potential solution. I’m sorry that you didn’t find my response helpful.

Here is a more complete code. I believe, that you can learn from it and make your own beautiful and creative design of the TransformControls gizmo.


Good luck with your project.
I would be happy if you share it here, once you complete it.


Your answer really helped me a lot. But there are still two challenges.
1- This gizmo is fixed and does not rotate with the object.
2- When the object go far or near, the gizmo should be reduced or enlarged accordingly.
Can you explain these things to me? Thank you :rose:

Please see this link to understand what I really want: Demo Company Room Visualizer, Powered by Roomvo

The example, that I posted, was answering your original request, which did not mention rotation or scaling. It was only showing how to change the handle with a texture.

As some point you should evaluate which approach is more practical:

  • to modify the existing TransformControls to what you need
  • to make your own controls with the functionality that you need.

Maybe the second options is already more reasonable. In a project of mine a few years ago I needed a mixture of OrbitControls and FlyControls. Instead of trying to combine them, I ended up with my own camera navigation. So, my suggestion it to consider this option too.

PS. When you spin the gizmo, the arrows may turn towards the direction of spinning. This is just a nice little touch, that will improve your project.

1 Like