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);
Next section: Usage