To dynamically disable the controls based on object selection, you can modify the control settings as needed. Here is an example of the controls being used:
controls = new THREE.TrackballControls(camera);
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
The controls in THREE.JS trigger mouse events that change the camera view. To disable the controls when an object is selected and enable them for view changes when dragging, you can use a global variable as a flag:
var killControls = false;
This flag is set to true when a ray collision with a specified object occurs upon clicking. Here is an event handler example:
/** Event fired when the mouse button is pressed down */
function onDocumentMouseDown(event) {
// code for mouse down event
}
/** Event handler for mouse movement */
function onDocumentMouseMove(event) {
// code for mouse move event
}
/** Event listener for mouse button release */
function onDocumentMouseUp(event) {
// code for mouse up event
}
/** Event listener for mouse leaving the renderer */
function onDocumentMouseOut(event) {
// code for mouse out event
}
In the main animation loop, you can update the controls conditionally based on the flag:
if (!killControls)
controls.update(delta);
else
controls.enabled = false;
Alternatively, you can use the following code for the same purpose:
if (killControls)
controls.enabled = false;
else
controls.update(delta);