# Possible to align TransformControls on arbitrary axes?

**URL:** <https://discourse.threejs.org/t/possible-to-align-transformcontrols-on-arbitrary-axes/6355>\
**Category:** Questions\
**Tags:** transform-controls\
**Created:** [February 28, 2019, 10:59pm UTC](https://discourse.threejs.org/t/possible-to-align-transformcontrols-on-arbitrary-axes/6355 "2019-02-28T22:59:59Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trusktr/32/13726_2.png) [@trusktr](https://discourse.threejs.org/u/trusktr)\
**Post date:** [February 28, 2019, 10:59pm UTC](https://discourse.threejs.org/t/possible-to-align-transformcontrols-on-arbitrary-axes/6355/1 "2019-02-28T22:59:59Z")

</div>

So instead of the controls being aligned to X, Y, and Z axes, can we orient the controls on axes, then transform on those axes?

---

<div class="post-metadata">

**Author:** ![reggie101](https://avatars.discourse-cdn.com/v4/letter/r/71e660/32.png) [@reggie101](https://discourse.threejs.org/u/reggie101)\
**Post date:** [October 25, 2019, 3:27pm UTC](https://discourse.threejs.org/t/possible-to-align-transformcontrols-on-arbitrary-axes/6355/2 "2019-10-25T15:27:39Z")

</div>

@trusktr I have the same question, were you able to figure it out?

---

<div class="post-metadata">

**Author:** ![asfg84](https://avatars.discourse-cdn.com/v4/letter/a/7993a0/32.png) [@asfg84](https://discourse.threejs.org/u/asfg84)\
**Post date:** [May 23, 2020, 10:13pm UTC](https://discourse.threejs.org/t/possible-to-align-transformcontrols-on-arbitrary-axes/6355/3 "2020-05-23T22:13:49Z")

</div>

I have the same problem. Any news about this issue?

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [May 23, 2020, 10:45pm UTC](https://discourse.threejs.org/t/possible-to-align-transformcontrols-on-arbitrary-axes/6355/4 "2020-05-23T22:45:50Z")

</div>

Is it possible overall? With slight modifications, yes.  
Is it possible now? Nope. For what I see in the code only world and identity spaces are handled.

You can cheat around a little by changing the orientation of the worldQuaternion (with `setMode('world')` enabled on controls.) Create a duplicate of TransformControls and add `setFromAxisAngle` to `parentQuaternion` and `worldQuaternion` after this line:

> <https://github.com/mrdoob/three.js/blob/79edf22a345079dc6cf5d8c6ad38ee22e9edab3c/examples/jsm/controls/TransformControls.js#L261>

Maybe there’s a simpler way, though I couldn’t find any 🤔

Edit: Just as an example, since I can’t make a fiddle with custom controls:

```javascript
parentQuaternion.setFromAxisAngle(new Vector3(0, 1, 0), Math.PI / 2);
worldQuaternion.setFromAxisAngle(new Vector3(0, 1, 0), Math.PI / 2);

parentQuaternionInv.copy( parentQuaternion ).inverse();
worldQuaternionInv.copy( worldQuaternion ).inverse();

```

Adding this will rotate the controls by 90° clockwise on Y-axis.

---

<div class="post-metadata">

**Author:** ![asfg84](https://avatars.discourse-cdn.com/v4/letter/a/7993a0/32.png) [@asfg84](https://discourse.threejs.org/u/asfg84)\
**Post date:** [May 25, 2020, 7:00pm UTC](https://discourse.threejs.org/t/possible-to-align-transformcontrols-on-arbitrary-axes/6355/5 "2020-05-25T19:00:54Z")

</div>

Thanks, but I could not get this working in my case. However, I found a simple solution for my problem:

I have a rotated Box which I want to display and be able to transform it and scale it along its rotated axes and not around the world axes (because when scaling it along the world axes its edges were not parallel anymore and it would no longer be a proper box).

I could solve it by adding a property called initialQuaternion to TransformControls and in the attach() function I set

```
this.object.quaternion.x = this.initialQuaternion[0];
this.object.quaternion.y = this.initialQuaternion[1];
this.object.quaternion.z = this.initialQuaternion[2];
this.object.quaternion.w = this.initialQuaternion[3];

```

If you choose setSpace(“local”), the controls are aligned with the given rotation and all transforms are applied in this frame. For setSpace(“world”) you can still translate and rotate the object around the world axes, but apply the scaling transform in the rotated frame.

In my case, I just had to make sure that the Box I attach to the TransformControls has zero rotation, because the rotation will be applied by the TransformControls already.

See: [https://github.com/mrdoob/three.js/issues/19436](https://github.com/mrdoob/three.js/issues/19436)

---

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trusktr/32/13726_2.png) [@trusktr](https://discourse.threejs.org/u/trusktr)\
**Post date:** [June 4, 2020, 1:35am UTC](https://discourse.threejs.org/t/possible-to-align-transformcontrols-on-arbitrary-axes/6355/6 "2020-06-04T01:35:50Z")

</div>

@reggie101 @asfg84 It turns out the camera controls read the camera’s `up` property. If you set `up` to the X axis (instead of the default Y) for example, then the controls will make the view’s up be along X so the left of the screen will be towards Y and right side will be towards -Y (or similar, maybe I have the negative sign backwards, but you get the idea).

Here is the docs on that: [https://threejs.org/docs/index.html#api/en/core/Object3D.up](https://threejs.org/docs/index.html#api/en/core/Object3D.up)

Cameras inherit from Object3D, and the camera controls use `lookAt` to make the camera look at objects (and `lookAt` depends on `up`).

---

<div class="post-metadata">

**Author:** ![yosan\_melese](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yosan_melese/32/73152_2.png) [@yosan\_melese](https://discourse.threejs.org/u/yosan_melese)\
**Post date:** [July 19, 2023, 9:26pm UTC](https://discourse.threejs.org/t/possible-to-align-transformcontrols-on-arbitrary-axes/6355/7 "2023-07-19T21:26:03Z")

</div>

not directly related but i have extended the gizmo to allow you to add any arbitrary axis defined with a vector direction

 ![custome transform Axis](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/a/1a71cee3c5583dd283314b4aa0bf33a18d880798.jpeg)

> [@Custome TransformControls that lets you add any arbitrary axis](https://discourse.threejs.org/t/custome-transformcontrols-that-lets-you-add-any-arbitrary-axis/54112):
>
> [custome transform Axis] I have extended the TransformControls functionality, which allows to add any defined axis. Defining the axis direction has become more convenient using a vector. Moreover, you can create multiple custom transfer axes using the method addCustomTransferAxes(axisDirList: Vector3). you can also add a single axis using addTransferAxis(axisDir: vector3) interactive demo with code coming soon Edit: Sorry for the delay. Unfortunately, i didnt got the chance to clean up the co…