I have modified DragControls.js by adding a constraint to move only the line on the y axis.

The line I use is this:

```
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 );
```

Here is my modification of Dragcontrols.js I have added constraints to the THREE.Dragcontrols function.

```
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;
};
```

That's how I apply it in the onDocumentMouseMove(event):

```
if ( _selected && scope.enabled ) {
if (event.altKey === true) {
rotationDrag = true;
}
//TODO: somewhere here should be a rotationDrag check and if it's true
than rotate the line instead of moving it
if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {
/**
* Constrain feature added
*/
_intersection.sub( _offset );
//_selected.position.copy( _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;
}
```

Where the debugger is I want to achive that if altKey is pressed and the mouse moved, the left end of the line is moving on the y axis while the right end point stays in the X and Y coordinates.

Basically the line rotates around its endpoint like a clock's hand.

Any idea how to achive this?

javascriptthree.jsrotation answered 4 months ago szabcsee #1

Well the answer happens to be pretty simple, only need to figure out, how to calculate angle and directions.

```
if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {
/**
* Constrain feature added
*/
_intersection.sub( _offset );
//_selected.position.copy( _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 {
_selected.rotateZ();
}
}
```