DragControls with Multiple Groups in Three.js

Based on the information available, I can suggest a few approaches to handle dragging multiple Group objects with DragControls.

Understanding the Issue

The problem you're experiencing is that DragControls seems to only respond to the first group when multiple groups are added. This is likely related to how DragControls handles its objects array and event detection.

Possible Solutions

1. Use the transformGroup property

If you're working with multiple groups, you might benefit from using the transformGroup property:

JAVASCRIPTCopied
const controls = new DragControls(groups, camera, renderer.domElement);
controls.transformGroup = true;

This property is designed to transform entire group objects rather than individual objects within them. However, note that this works best when your objects array contains a single group with multiple objects.

2. Flatten your groups into a single array

Instead of adding groups directly to DragControls, you could flatten all the objects from your groups into a single array:

JAVASCRIPTCopied
const allObjects = [];
groups.forEach(group => {
  group.traverse(object => {
    if (object.isMesh) {
      allObjects.push(object);
    }
  });
});

const controls = new DragControls(allObjects, camera, renderer.domElement);

3. Use the recursive property

Make sure the recursive property is set to true (which is the default):

JAVASCRIPTCopied
const controls = new DragControls(groups, camera, renderer.domElement);
controls.recursive = true;

This allows child objects of your draggable objects to be dragged independently of their parent objects.

4. Create separate DragControls for each group

Another approach is to create a separate DragControls instance for each group:

JAVASCRIPTCopied
const controlsInstances = groups.map(group => {
  return new DragControls([group], camera, renderer.domElement);
});

// Add event listeners to each instance
controlsInstances.forEach(controls => {
  controls.addEventListener('dragstart', function(event) {
    event.object.material.emissive.set(0xaaaaaa);
  });
  controls.addEventListener('dragend', function(event) {
    event.object.material.emissive.set(0x000000);
  });
});

This might be more manageable than modifying the DragControls class itself.

Conclusion

Without seeing your specific implementation, it's hard to pinpoint the exact issue. However, these approaches should provide cleaner alternatives to manually triggering the onPointerDown event. The best solution will depend on your specific scene structure and requirements.