Skip to main content Link Menu Expand (external link) Copy Copied


via NPM

npm install --save three-freeform-controls

Available as:

import * as FreeformControls from 'three-freeform-controls';
// individual components can be imported as well
import { ControlsManager } from 'three-freeform-controls';

For versions <= 0.1.12 (compatible with threejs version r123), the UMD module can be imported as a script

<!-- Import three.js first -->
<script src=""></script>
<!-- Then import three-freeform-controls -->
<script src="[email protected]/dist/three-freeform-controls.umd.js"></script>

The UMD module from script tag will be available as object FreeformControls on the window scope.

Basic Usage

Given a three.js camera, scene, and renderer:

const controlsManager = new FreeformControls.ControlsManager(

Now anchoring the controls on a three.js object:

// box is of type THREE.Object3D
// box can thus be a THREE.Mesh or a THREE.Group for a group of objects
const controls = controlsManager.anchor(box);

View example


Next section: Usage