# Custome TransformControls that lets you add any arbitrary axis

**URL:** <https://discourse.threejs.org/t/custome-transformcontrols-that-lets-you-add-any-arbitrary-axis/54112>\
**Category:** Showcase\
**Created:** [July 19, 2023, 9:08pm UTC](https://discourse.threejs.org/t/custome-transformcontrols-that-lets-you-add-any-arbitrary-axis/54112 "2023-07-19T21:08:32Z")\
**Posts on this page:** 10\
**Page:** 1

<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:08pm UTC](https://discourse.threejs.org/t/custome-transformcontrols-that-lets-you-add-any-arbitrary-axis/54112/1 "2023-07-19T21:08:32Z")

</div>

![custome transform Axis](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/a/1a71cee3c5583dd283314b4aa0bf33a18d880798.jpeg)  
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 code so i thought i would just share what i got.

> **[pedantic-sanne-qcqtpf - CodeSandbox](https://codesandbox.io/s/pedantic-sanne-qcqtpf?file=%2Fsrc%2Findex.js)**
>
> pedantic-sanne-qcqtpf by yosanai using loader-utils, react, react-dom, react-scripts, three

the most important part of the code is:

```javascript
let axesDirList = [
  new THREE.Vector3(1, 1, 1), // Quadrant I
  new THREE.Vector3(-1, 1, 1), // Quadrant II
  new THREE.Vector3(-1, -1, 1), // Quadrant III
  new THREE.Vector3(1, -1, 1), // Quadrant IV
];
....
transformControl.addTransferAxesList(axesDirList);

```

---

<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:** [July 20, 2023, 12:35am UTC](https://discourse.threejs.org/t/custome-transformcontrols-that-lets-you-add-any-arbitrary-axis/54112/2 "2023-07-20T00:35:39Z")

</div>

Got a link?

---

<div class="post-metadata">

**Author:** ![pecopeco](https://avatars.discourse-cdn.com/v4/letter/p/f9ae1b/32.png) [@pecopeco](https://discourse.threejs.org/u/pecopeco)\
**Post date:** [July 20, 2023, 12:54am UTC](https://discourse.threejs.org/t/custome-transformcontrols-that-lets-you-add-any-arbitrary-axis/54112/3 "2023-07-20T00:54:03Z")

</div>

where is it?

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [July 20, 2023, 4:07am UTC](https://discourse.threejs.org/t/custome-transformcontrols-that-lets-you-add-any-arbitrary-axis/54112/4 "2023-07-20T04:07:29Z")

</div>

Does it allow rotation around arbitrary axis?

Does it allow scaling along arbitrary axis?

---

<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 20, 2023, 8:58am UTC](https://discourse.threejs.org/t/custome-transformcontrols-that-lets-you-add-any-arbitrary-axis/54112/5 "2023-07-20T08:58:09Z")

</div>

Currently, it only allows transfering. But the concept can easily be appkied to rotation and scaling. I have only extended it just enough for a required task, but if i see enough interest here, i might add rotation and scaling

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [July 20, 2023, 9:11am UTC](https://discourse.threejs.org/t/custome-transformcontrols-that-lets-you-add-any-arbitrary-axis/54112/6 "2023-07-20T09:11:22Z")

</div>

> [@yosan\_melese](#):
>
> But the concept can easily be appkied to rotation and scaling.

Excellent. I’d love to see the implementation of scaling and rotation, as long as they have the potential to skew geometries like in the following illustration (it shows scaling along a diagonal axis so that a square becomes a rhomboid).

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/6/265f9d042da7516fde1ebb17cf4829d6c8561536.png)

---

<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 20, 2023, 8:11pm UTC](https://discourse.threejs.org/t/custome-transformcontrols-that-lets-you-add-any-arbitrary-axis/54112/7 "2023-07-20T20:11:48Z")

</div>

AFIK that is skewing and not scaling. scaling would just scale the object in proportion to the cosine of X,Y and Z of the axis you defined.

---

<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:** [September 24, 2023, 4:03pm UTC](https://discourse.threejs.org/t/custome-transformcontrols-that-lets-you-add-any-arbitrary-axis/54112/8 "2023-09-24T16:03:13Z")

</div>

@trusktr@pecopeco @PavelBoytchev added a link check it out.

---

<div class="post-metadata">

**Author:** ![makc3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/makc3d/32/10452_2.png) [@makc3d](https://discourse.threejs.org/u/makc3d)\
**Post date:** [September 24, 2023, 4:27pm UTC](https://discourse.threejs.org/t/custome-transformcontrols-that-lets-you-add-any-arbitrary-axis/54112/9 "2023-09-24T16:27:28Z")

</div>

you can technically do that but you need to turn matrix auto-updates off. since decomposing/recomposing will mess this up

---

<div class="post-metadata">

**Author:** ![makc3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/makc3d/32/10452_2.png) [@makc3d](https://discourse.threejs.org/u/makc3d)\
**Post date:** [September 24, 2023, 4:34pm UTC](https://discourse.threejs.org/t/custome-transformcontrols-that-lets-you-add-any-arbitrary-axis/54112/10 "2023-09-24T16:34:33Z")

</div>

![box](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/8/986b4d56988255f1f9336b5af4b9f481554e85f4.gif)