# Three-freeform-controls (alternative to TransformControls)

**URL:** <https://discourse.threejs.org/t/three-freeform-controls-alternative-to-transformcontrols/12211>\
**Category:** Showcase\
**Tags:** rotation, transform-controls, controls\
**Created:** [January 20, 2020, 7:02am UTC](https://discourse.threejs.org/t/three-freeform-controls-alternative-to-transformcontrols/12211 "2020-01-20T07:02:34Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![tocttou](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tocttou/32/8807_2.png) [@tocttou](https://discourse.threejs.org/u/tocttou)\
**Post date:** [January 20, 2020, 7:02am UTC](https://discourse.threejs.org/t/three-freeform-controls-alternative-to-transformcontrols/12211/1 "2020-01-20T07:02:34Z")

</div>

Hi!  
For the last few months I have been working (on/off) on a controls library for `three.js objects`. Finally got the time to finish the docs and api reference.  
It provides 6-dof rotation and translation controls and is built to be fully customisable (something that I found to be lacking in TransformControls). Please take a look. Thanks!

Github: [https://github.com/tocttou/three-freeform-controls](https://github.com/tocttou/three-freeform-controls)  
Documentation: [https://ashishchaudhary.in/three-freeform-controls/](https://ashishchaudhary.in/three-freeform-controls/)

 ![three-freeform-controls](https://i.imgur.com/cTJTG9o.png)

---

<div class="post-metadata">

**Author:** ![mmalex](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mmalex/32/8805_2.png) [@mmalex](https://discourse.threejs.org/u/mmalex)\
**Post date:** [January 20, 2020, 8:41pm UTC](https://discourse.threejs.org/t/three-freeform-controls-alternative-to-transformcontrols/12211/2 "2020-01-20T20:41:31Z")

</div>

Hi @tocttou, great work!  
I tried to achieve same result in jsfiddle ([http://jsfiddle.net/mmalex/cgfm25p9/](http://jsfiddle.net/mmalex/cgfm25p9/)), maybe now I will use your solution. Thanks!

---

<div class="post-metadata">

**Author:** ![chrisnguyen](https://avatars.discourse-cdn.com/v4/letter/c/b487fb/32.png) [@chrisnguyen](https://discourse.threejs.org/u/chrisnguyen)\
**Post date:** [March 26, 2024, 8:10am UTC](https://discourse.threejs.org/t/three-freeform-controls-alternative-to-transformcontrols/12211/3 "2024-03-26T08:10:13Z")

</div>

I have issue when use TransformControls.  
In mode rotate, i want to rotate object 360 degrees. Code below:

```javascript
else if (axis === "X" axis === "Y" axis === "Z") {
    this.rotationAxis.copy(_unit[axis]);

    this.rotationAngle = this.pointEnd.angleTo(this.pointStart);

    this._startNorm.copy(this.pointStart).normalize();
    this._endNorm.copy(this.pointEnd).normalize();

    this.rotationAngle *= this._endNorm.cross(this._startNorm).dot(this.eye) < 0 ? 1 : -1;
}

```

It doesn’t work properly when I change the camera direction. The object’s rotation direction is opposite to the direction of my mouse pointer.  
Pls help! Thanks