Using DragControls to control hover on a mesh with attached meshes

Questions
1

Hi I’m pretty new to Three.js so please excuse me if some of my code makes you feel funny.

I am using DragControls to drag objects around. These objects have text meshes attached. Originally, my issue was that trying to drag the object would not also drag those child text meshes. I was able to fix that by setting DragControls.transformGroup to true.

Now I wanted to also use the ‘hoveron’ and ‘hoveroff’ events of DragControls, but it seems that original wrong behavior is back. On hover, the GLTF model moves but not its attached meshes.

I’m not sure what to do here, also I don’t quite understand why it behaves differently on the hover event versus the drag events.

Here’s the part of my code where I set up the drag behavior. This works just as expected and how I want it to:

// ...

this.controls = new DragControls(this.dragObjects, this.camera, this.renderer.domElement)
this.controls.transformGroup = true

// ...

setupDragBehavior() {
    let orig = { x: 0, y: 0, z: 0 }

    this.controls.addEventListener("dragstart", e => {
        orig.x = e.object.position.x
        orig.y = e.object.position.y

        e.object.position.z = DEFAULT_CARD_Z_POS
    })

    this.controls.addEventListener("drag", e => {
        const v = this.mouse.velocity
        e.object.position.z = DEFAULT_CARD_Z_POS + 3

        e.object.rotation.x = v.top ? v.top / 10 : -v.bottom / 10
        e.object.rotation.y = v.right ? Math.PI + v.right / 10 : Math.PI - v.left / 10
    })

    this.controls.addEventListener("dragend", e => {
        e.object.position.z = DEFAULT_CARD_Z_POS

        e.object.rotation.x = 0
        e.object.rotation.y = Math.PI
        e.object.rotation.z = 0

        const isDroppedOnHand = this.mouse.y <= this.handDropZone.startY
        if (isDroppedOnHand) {
            // TODO put card in hand
        } else {
            e.object.position.x = orig.x
            e.object.position.y = orig.y
            e.object.position.z = DEFAULT_CARD_Z_POS
        }
    })
}

Then I tried using the hover events, and have the same problem I had originally, hovering over the mesh will leave the attached text meshes behind:

this.controls.addEventListener("hoveron", e => {
    orig.z = e.object.position.z
    e.object.position.z = DEFAULT_CARD_Z_POS + 1
})

this.controls.addEventListener("hoveroff", e => {
    e.object.position.z = orig.z
})

Would be very grateful for any help here.