How to Draggable groups (child of glb scene)

Questions
, ,
1

Hi…
i have a slightly confusing problem regarding glb/gltf

|_parent
|__children (group)
|___grandChild(mesh)

ive 5 group as children of parent, but ive draggable function in my code, because group i cant draggable because if u want draggable object must have geometry, but group doesn ve it.

image
image530×844 41.8 KB

and ive code for draggable

import { System } from 'three/addons/libs/ecsy.module.js';
import { Object3D } from '../../composables/components/Object3DComponent.js';
import { DraggableDefault } from '../components/DraggableDefaultComponent.js';
import * as THREE from 'three';

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

            if (draggable.originalParent == null) {
                draggable.originalParent = object.parent;
            }

            switch (draggable.state) {
                case 'to-be-attached':
                    draggable.attachedPointer.attach(object);
                    draggable.state = 'attached';
                    break;
                case 'to-be-detached':
                    draggable.originalParent.attach(object);
                    draggable.state = 'detached';
                    break;
                case 'to-be-draggable':
                    object.position.z = THREE.MathUtils.damp(object.position.z, -0.3, 0.1, 0.6);
                    if (Math.abs(object.position.z - 0.1) < 0.01) {
                        draggable.state = 'attached';
                    }
                    break;
                default:
                    object.scale.set(1, 1, 1);
            }
        });
    }
}

DraggableDefaultSystem.queries = {
    draggable: { components: [DraggableDefault] }
};

i tried using mergedGeometry before , but it doesnt work

here the code

                gltf.scene.children.forEach((group) => {
                    if (group.isGroup) {
                        const geometries = [];
                        const materials = [];

                        group.traverse((grandChild) => {
                            if (grandChild.isMesh && grandChild.geometry) {
                                const clonedGeometry = grandChild.geometry.clone();
                                clonedGeometry.applyMatrix4(grandChild.matrixWorld);

                                geometries.push(clonedGeometry);
                                materials.push(grandChild.material);
                            }
                        });

                        if (geometries.length > 0) {
                            const mergedGeometry = mergeGeometries(geometries);
                            let mergedMaterial = materials.length > 1 ? materials : materials[0];

                            const mergedMesh = new Mesh(mergedGeometry, mergedMaterial);
                            mergedMesh.position.copy(group.position);
                            mergedMesh.rotation.copy(group.rotation);
                            mergedMesh.scale.copy(group.scale);
                            mergedMesh.name = group.name;
                            gltf.scene.remove(group);
                            gltf.scene.add(mergedMesh);
                        }

                    }
                });

maybe if u have solution, please comment here thanks man