Link

Installation

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="https://cdnjs.cloudflare.com/ajax/libs/three.js/r123/three.min.js"></script>
<!-- Then import three-freeform-controls -->
<script src="https://cdn.jsdelivr.net/npm/[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(
  camera,
  renderer.domElement
);
scene.add(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

screenshot

Next section: Usage