Three.js - TransformControls

Question

I'm using the transformControls to translate, rotate and scale my objects. I want to be able to click on the different objects in my scene and transform them whenever I want: and it works ! The only problem is that geometries have their clickable zone half moved up:

That is to say that I can't select my object on clicking in the lower zone, but if I click above it will be selected.

And for the collada files it is even worse.

I think it should be somewhere here:

function onDocumentTouchStart(event){
    event.preventDefault();
    event.clientX = event.touches[0].clientX;
    event.clientY = event.touches[0].clientY;
    onDocumentMouseDown(event);
}
function onDocumentMouseDown(event){
    event.preventDefault();
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
    raycaster.setFromCamera(mouse, camera);
    var intersects = raycaster.intersectObjects(objects);
    if(intersects.length > 0){
        SELECTED = intersects[ 0 ].object;
        scene.add(control);
        control.attach(SELECTED);
    } else{
        scene.remove(control);
    }
}

EDIT :

OMG... The problem was some margins which were here...

But now, my beginner problem is that I don't really know how to attach transformControls to my object. With the transformControls, I still have the problem. But when I change the material color on click, it works perfectly. Have the transformControls some kind of margins ? I did this :

if(intersects.length > 0){
            SELECTED = intersects[ 0 ].object;
            scene.add(control);
            control.attach(SELECTED);
        } else{
            scene.remove(control);
        }

Answer 1

The answer was obvious... :

    if(intersects.length > 0){
    SELECTED = intersects[ 0 ].object;

    control.attach(SELECTED);
    scene.add(control);

} else{
    control.detach(SELECTED);
    scene.remove(control);
}

I forget to detach the controls