I made a custom modification to DragControls.js so that it only allows movement of the line on the y-axis.
Here is the line setup I am using:
material = new THREE.LineBasicMaterial( { color: 0xFF0000 } );
geometry.vertices.push(new THREE.Vector3( 0, 0, 0) );
geometry.vertices.push(new THREE.Vector3( 10, 0, 0) );
scene.add( redline );
dragControls = new THREE.DragControls( objects, camera, renderer.domElement );
Below is my revised version of Dragcontrols.js where I added constraints to limit movement:
this.constrains = function(xyz) {
if (xyz === undefined)
xyz = 'xyz';
moveX = moveY = moveZ = false;
if (xyz.indexOf('x') > -1) {
moveX = true;
}
if (xyz.indexOf('y') > -1) {
moveY = true;
}
if (xyz.indexOf('z') > -1) {
moveZ = true;
}
return this;
};
This is how I implement it in the onDocumentMouseMove(event):
if ( _selected && scope.enabled ) {
if (event.altKey === true) {
rotationDrag = true;
}
//TODO: insert rotationDrag check here and rotate the line instead of moving
if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {
/**
* Constrain feature added
*/
_intersection.sub( _offset );
if (!rotationDrag) {
if (moveX) _selected.position.x = _intersection.x;
if (moveY) _selected.position.y = _intersection.y;
if (moveZ) _selected.position.z = _intersection.z;
} else {
debugger;
}
}
scope.dispatchEvent( { type: 'drag', object: _selected } );
return;
}
At the point where the debugger is placed, I aim to have the left end of the line move along the y-axis when altKey is pressed while keeping the right endpoint fixed in X and Y coordinates. This creates a rotational movement similar to a clock's hand.
Any suggestions on how to achieve this effect?