Drag an object only in the x y axis

I had the same requirement, but only allow to move on X axis. I did it the following way. And

const objects = [];
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
objects.push( cube );

const dragControls = new THREE.DragControls(objects, camera, renderer.domElement);

dragControls.addEventListener( 'dragstart', function ( event ) {
 console.log('drag start');
});
dragControls.addEventListener ( 'drag', function( event ){
 console.log('drag');
 event.object.position.z = 0; // This will prevent moving z axis, but will be on 0 line. change this to your object position of z axis.
})
dragControls.addEventListener( 'dragend', function ( event ) {
 console.log('drag end');
});

If you you are working with OrbitControl check out the following link. @Mugen87 has answered a nice solution.

2 Likes