Description

Presenting 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:

Rotate:

Scale:

Example

Here is an example page, with this library implemented:

link

source code

Usage

Install the package:

npm i three-gizmo

Then you can import it like this:

import { gizmo } from "three-gizmo";
helper = gizmo(camera, renderer)

To choose which type of transformation is active you can call these functions

helper.move()
helper.rotate()
helper.scale()
helper.none()

For each transformation you can use events to modify your objects:

helper.on("rotate", angle=>{
  // this function will be caleed during the rotation process
})
helper.on("end-rotate",angle=>{
  // this function will be caleed at the end of the rotation process
})

the available events are: scale, end-scale, move, end-move, rotate, end-rotate

Finally, to render your gizmo after the render function you must call the gizmo render function:

renderer.render( scene, camera );
helper.render()

You can change the gizmo position by calling this method:

helper.setOrigin(position)

you can call the following method to check if the mouse is over any of the helpers, this is useful to not take any other click action, if you are selecting a gizmo

helper.isHover()

You can customize your gizmo by using the setColor function

import { setColor } from "three-gizmo";
setColor("color1",0xff0000)
setColor("color2",0x00ff00)
setColor("color3",0x0000ff)

The supported parameters are

color1, color2, color3, color4 ,hover