First I should specify that I am working with a 2D camera and 2D objects, and the entire thing is an Angular Project with one page using three.js. The intended behavior I want is:
Only some objects in the scene are draggable.
Only the parent object is draggable (i.e. if you try to drag a child object or descendants of a draggable object, the draggable object as a whole is the one that moves.
If multiple draggable objects are overlayed and you start dragging somewhere in their intersection, only one of them moves.
Currently, I have two approaches, both of which use DragControls, neither of which accomplishes all 3:
Putting all the objects in the object array of a single DragControl. This accomplishes 1 and 3, but allows you to drag child objects without moving the parent.
Putting each draggable object in its own DragControl and setting transformGroup to true. This accomplishes 1 and 2, but now if I drag at some spot where multiple draggable objects are overlayed, all of them move.
What is the best way to accomplish all 3? Am I missing something?
Maybe it is possible to tickle DragControls (e.g. deactivating, changing target object, rectivating) … but what about making your own dragging? I’m not sure whether this is the best way, but for sure it is the vanilliest one!
Here is a quick-and-dirty demo. The squarish objects are draggable, the circular are not. All of them are groups with subobjects.
Thank you for the effort that you put into this. I tested a version of this in my project. Unfortunately, I also have to support zooming behavior and window resizing, and I am unable to get it to work with both. I will keep looking for other workarounds in the meantime.
Sometimes it will be faster to make something manually, instead of looking for the perfect solution. In the example above, all the items from your initial request are done manually. In a similar way all extra things, like zooming and resizing can also be done manually.
You can also try @anidivr’s suggestion by having own modified copy of the DragControls.js file.
This is pretty neat. One small nitpick is that when you hover over the circular objects, the cursor changes to appear like you can click it when it does nothing. I don’t know your library at all so I don’t know if that is a thing your library can turn off and you just decided not to use it. I just wanted to let you know about it since you could go either way in terms of whether the object should appear to be clickable.
The recursive property is not meant to work with groups of objects, just when there is a clear hierarchy of objects with parent-child relationships and the raycasting affects multiple draggable objects. It does not handle this use case and I agree that the new PR is useful (See the more recent comments on that PR). Perhaps the old PR was not completely accurate in its description.