Making Group Objects Draggable in Three.js

Based on your scenario, you're facing an issue where your draggable functionality doesn't work on Group objects because they don't have geometry. Here are some approaches to solve this problem:

Option 1: Add a Helper Mesh to Each Group

Instead of trying to merge geometries, you can add an invisible helper mesh to each group that will be used for dragging:

JAVASCRIPTCopied
gltf.scene.children.forEach((group) => {
  if (group.isGroup) {
    // Create a bounding box for the group
    const box = new THREE.Box3().setFromObject(group);
    const size = box.getSize(new THREE.Vector3());
    
    // Create an invisible mesh with the size of the group
    const helperGeometry = new THREE.BoxGeometry(size.x, size.y, size.z);
    const helperMaterial = new THREE.MeshBasicMaterial({ 
      visible: false, // Make it invisible
      transparent: true,
      opacity: 0
    });
    
    const helperMesh = new THREE.Mesh(helperGeometry, helperMaterial);
    
    // Center the helper mesh to the group
    box.getCenter(helperMesh.position);
    helperMesh.position.sub(group.position); // Adjust for group's position
    
    // Add the helper mesh to the group
    group.add(helperMesh);
    
    // You can now use the group for dragging
  }
});

Option 2: Modify Your Draggable System

Instead of requiring geometry, modify your draggable system to work with any Object3D:

JAVASCRIPTCopied
export class DraggableDefaultSystem extends System {
    execute() {
        this.queries.draggable.results.forEach(entity => {
            const draggable = entity.getMutableComponent(DraggableDefault);
            const object = entity.getComponent(Object3D).object;

            // The rest of your code remains the same
            // No need to check for geometry since we're working with any Object3D
        });
    }
}

Option 3: Fix Your Geometry Merging Approach

Your geometry merging approach has some issues. Here's a corrected version:

JAVASCRIPTCopied
import { mergeBufferGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
import { Mesh, MeshBasicMaterial } from 'three';

gltf.scene.children.forEach((group) => {
    if (group.isGroup) {
        const geometries = [];
        const worldMatrix = group.matrixWorld.clone();
        
        // First, collect all geometries
        group.traverse((grandChild) => {
            if (grandChild.isMesh && grandChild.geometry) {
                // Clone the geometry
                const clonedGeometry = grandChild.geometry.clone();
                
                // Apply the mesh's local transform relative to the group
                const relativeMatrix = new THREE.Matrix4()
                    .copy(grandChild.matrixWorld)
                    .premultiply(new THREE.Matrix4().copy(worldMatrix).invert());
                
                clonedGeometry.applyMatrix4(relativeMatrix);
                geometries.push(clonedGeometry);
            }
        });

        if (geometries.length > 0) {
            // Use mergeBufferGeometries instead of mergeGeometries
            const mergedGeometry = mergeBufferGeometries(geometries);
            
            // Create a simple material for the merged mesh
            const mergedMaterial = new MeshBasicMaterial({ color: 0xcccccc, transparent: true, opacity: 0.5 });
            
            // Create the merged mesh
            const mergedMesh = new Mesh(mergedGeometry, mergedMaterial);
            mergedMesh.name = group.name + "_merged";
            
            // Preserve the original group but add the merged mesh
            group.add(mergedMesh);
            
            // Make the merged mesh invisible but still interactive
            mergedMesh.visible = false;
            
            // Now you can use the group for dragging
        }
    }
});

Option 4: Use a Proxy Object for Dragging

Another approach is to create a proxy object that follows the group:

JAVASCRIPTCopied
gltf.scene.children.forEach((group) => {
    if (group.isGroup) {
        // Create a bounding box to get the size of the group
        const box = new THREE.Box3().setFromObject(group);
        const size = box.getSize(new THREE.Vector3());
        
        // Create a proxy mesh for dragging
        const proxyGeometry = new THREE.BoxGeometry(size.x, size.y, size.z);
        const proxyMaterial = new THREE.MeshBasicMaterial({ 
            wireframe: true, 
            visible: false 
        });
        
        const proxyMesh = new THREE.Mesh(proxyGeometry, proxyMaterial);
        
        // Position the proxy at the same position as the group
        proxyMesh.position.copy(group.position);
        proxyMesh.rotation.copy(group.rotation);
        proxyMesh.scale.copy(group.scale);
        proxyMesh.name = group.name + "_proxy";
        
        // Add the proxy to the scene
        gltf.scene.add(proxyMesh);
        
        // Store a reference to the original group
        proxyMesh.userData.targetGroup = group;
        
        // Use the proxy for dragging, and update the group position in your drag handler
    }
});

Then in your drag handler, you would update both the proxy and the original group.

Choose the approach that best fits your application architecture. Option 1 or Option 2 are likely the simplest to implement.