Limit distance object can be dragged with DragControls

Hello!

I am currently dragging objects with DragControls and I have prevented reposition of the objects in the y axis:

var dragControls = new DragControls( objects, camera, renderer.domElement);
dragControls.addEventListener( ‘dragstart’, function () {
cameraControl.enabled = false;
} );
dragControls.addEventListener( ‘dragend’, function () {
cameraControl.enabled = true;
} );
dragControls.addEventListener ( ‘drag’, function( event ){
console.log(‘drag’);
event.object.position.y = 0;
});

I’m now looking to put limits on the area the objects can be dragged around the xz plane. I’d either like to set ranges within which objects can be dragged on a particular axis e.g.:
The objects can be dragged between 50 and -50 on the x-axis, and 50 and -50 on the z axis,

or

Set a max distance from ( 0, 0, 0) that an object can be dragged e.g.:
The objects can be dragged a maximum distance of 50 from ( 0, 0, 0).

Thank you :+1:

Hi!
You can clamp object’s position:

This is exactly what I’m looking for, thanks very much!

However I’ve had great trouble trying to implement it this past day for my loaded models. I’ve seen in your fiddle that your applying the update to the “objects” array, but I get hit with an error on ‘o.userData.update’ when I try to add other objects to the array.

I’ve added a couple of OBJ models to the fiddle that I would like to move alongside (or independently of) the cube, if you could shed more light on this that would be great :ok_hand:

https://jsfiddle.net/tiarnola/qp69m3rt/13/

1 Like