threejs How to rotate transformcontrol itself

Question

I'd like to rotate transformcontrol itself when object which attach to transformcontrol is rotate.

Before rotate

After rotate

As image shown, before rotate, cylinder's top direction is z-axis of transformcontrol, however after rotate is not.

I'd like that the transformcontrol's z axis to be always in the upward direction of the cylinder.

Answer 1

TransformControls returns an object that you can modify directly.

const controls = new TransformControls(camera, renderer.domElement);
controls.setSpace('local');
controls.rotation.x = Math.PI / -2;

If you want to sync its rotation with your mesh, you can add it as a child of that mesh or use Euler#copy.

mesh.add(controls);

// or manually in a render loop, for example

scene.add(controls);

renderer.setAnimationLoop(() => {
  controls.rotation.copy(mesh.rotation);

  renderer.render(scene, camera);
});