The Three.js objects for the handles can be accessed as properties on the Controls instance.

The below table maps all the default handle objects available to their handle names.

Note that:

1. the handle names are accessible on the DEFAULT_HANDLE_GROUP_NAME export.
2. the handle objects are accessible on the Controls instance.

import { DEFAULT_HANDLE_GROUP_NAME } from "three-freeform-controls";
console.log(DEFAULT_HANDLE_GROUP_NAME.ZPT); // zpt_handle
// ...
const controls = ControlsManager.anchor(box);
console.log(controls.translationZP); // three.js object

Manipulating default handles objects

The three.js objects for handles can be manipulated as usual, albeit with the following precautions:

If the handles are rotated explicitly, apply the same operation to the up vector on the object:

The up vector is a vector normal to the handles object. This vector is used to find the interaction plane for raycasting.

const controls = ControlsManager.anchor(box);
const quaternion = new THREE.Quaternion(-0.007, -0.776, 0.554, 0.301);
// rotating the rotationY handle
controls.rotationY.applyQuaternion(quaternion);
// the up vector also must be rotated
controls.rotationY.up.applyQuaternion(quaternion);

The parallel vector is a vector parallel to the handles object. This is defined only for the instances of TranslationGroup.

// rotating the translationYP handle
controls.translationYP.applyQuaternion(quaternion);
// the up vector also must be rotated
controls.translationYP.up.applyQuaternion(quaternion);
// the parallel vector also must be rotated
controls.translationYP.parallel.applyQuaternion(quaternion);

Customizing color

Since the handles objects can be accessed directly, their appearance can be modified by modifying the object.

It is more convenient to use the setColor function on the handles:

const controls = new ControlsManager.anchor(box);
controls.rotationY.setColor("pink");

An example illustrating rotation, translation, and color change for default handles can be accessed below.

View example

Next section: Custom Handles