I made a interactive gizmo system to manipulate objects in three js

Showcase
1

An open-source solution designed for effortless object manipulation within Three.js. This interactive tool empowers you to modify objects by simply clicking and dragging on individual components of the gizmo. This solution offers three distinct modes: Move, Rotate, and Scale.

Move:
ecd496f9-c9fa-42c5-9be4-230253295f30

Rotate:
76fbe30b-441b-4509-a145-d048388f1ce2

Scale:
80ec3dc7-3fe9-4529-b4b1-ad597b88193a

Here you can find a implementation example page:
link: Three Gizmo Example
source code: GitHub - Thiago099/three-gizmo-example

the library alongside with the documentation can be found here:
link: three-gizmo - npm
source code: GitHub - Thiago099/three-gizmo

1 Like
2

Nice, apart from the appearance, how would this be different or more beneficial / performant than TransformControls?

1 Like
3

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

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