is that possible set TransformControl’s mode “translate”+“rotate” + “scale” at the same time?
I’m looking some transform tool like fabricjs
I don’t think this is currently possible and even if it was, it would make the transform gizmo confusing to have all the modes enabled. At least as it’s currently designed.
Do you have an example of a transform tool that allows all three modes at once?
1 Like
Spline has a combined transformControl that works pretty well. I don’t think it’s open source but you can probably inspect the code and see how it’s implemented.
I also made a semi-combined transformControl for Penzil. The implementation is a bit hacky but you are welcome to take a peek and use it as a basis to implement your own. It’s a bit tedious but not that difficult.
2 Likes
thank you,I’ll take a look.
@jacopocolo that’s very cool. Doesn’t feel hacky to use at least 
You do lose the ability to translate in multiple planes at once though, and in rotation mode the TransformControls also has a big yellow ring that allows you to rotate in in the view plane. So there are trade offs. Maybe worth it though?
Hi,
I need something exactly like this.
How can I do that?
It’s possible to sort of do this by applying multiple TransformControls in different modes to the same object:
// Add a double transform control to the object
this.translateControl = new TransformControls(this.world.camera, this.world.renderer.domElement);
this.translateControl.attach(this.object);
this.translateControl.addEventListener('change', () => { this.renderer.render(this.scene, this.camera); });
this.translateControl.addEventListener('dragging-changed', (event) => { this.controls.enabled = !event.value; this.rotateControl.enabled = !event.value; });
this.translateControl.setMode("translate");
this.scene.add( this.translateControl.getHelper() );
this.rotateControl = new TransformControls(this.world.camera, this.world.renderer.domElement);
this.rotateControl.attach(this.object);
this.rotateControl.addEventListener('change', () => { this.renderer.render(this.scene, this.camera); });
this.rotateControl.addEventListener('dragging-changed', (event) => { this.controls.enabled = !event.value; });
this.rotateControl.setMode("rotate");
this.rotateControl.size = 0.45;
this.scene.add( this.rotateControl.getHelper() );
Just need to make sure that the first one disables the other in dragging-changed, and that they’re different sizes (so the handles don’t directly overlap).
It’s not perfect, but it works in a pinch.
Ideally the controls could be aware of eachother to provide more intelligent hover exclusivity; perhaps a good PR to make…