Partial Controls

Handles in controls can be enabled selectively.

showAll

Hiding all handles:

// ...
const controls = ControlsManager.anchor(box);
controls.showAll(false); // or true to make all handles visible

showByNames

Hiding handles selectively:

import { DEFAULT_HANDLE_GROUP_NAME } from 'three-freeform-controls';
// ...
const controls = ControlsManager.anchor(box);
controlsFixed.showByNames([
  DEFAULT_HANDLE_GROUP_NAME.ZPT,
  DEFAULT_HANDLE_GROUP_NAME.ZNT,
  DEFAULT_HANDLE_GROUP_NAME.ZR
], false); // or true to make these handles visible, if not already

The above snippet hides the positive translation, negative translation, and rotation z-handles. Details on the handle names can be found in the API docs.

If the user wants to show only some specific handles, it can be done by:

showAll(false): to hide all the handles at first
showByNames([handlesToShow], true): to display only selective handles

Since the handles are Three.js objects, we can modify their display property directly as well:

const controls = ControlsManager.anchor(box);
// hiding the rotation handle in the yz plane (x-axis is the normal)
controls.rotationX.visible = false;

View example

Next section: Customize Handles