Odd behavior with tansforms control

So I’m setting up Transfrom Controls:

    // Transform controls
	var cameraPersp = new THREE.PerspectiveCamera( 50, aspect, 0.01, 30000 );
	var currentCamera = cameraPersp;
        var currentCamera = new THREE.PerspectiveCamera( 50, aspect, 0.01, 30000 );    
        control = new TransformControls( currentCamera, renderer.domElement );
	control.addEventListener( 'change', render );
	control.addEventListener( 'dragging-changed', function ( event ) {
		orbit.enabled = ! event.value;
	} );

I am then attaching an object to another and binding it to a bone. I’m guessing in order to manipulate the attached object with transfrom then I have to un-attach it first? I get no errors but when I try to attach the control to the object the transform controls do not appear, hitting the space bar has no effect… I have the keyboard bindings in my code copied from the example. If I print my scene objects to the console it has added objects in my scene with some variation of xyz axis…

// Attach Transform Control to object

$(document).on('click', ".config", function (event) {
    var slot = $(this).attr('alt');
    var mesh = avatar.getObjectByName(slot); 
    control.attach( mesh );
    scene.add( control );


What am I missing here?

Thank you…

Well I figured out that I have not used the correct camera and now the transform control is actually appearing in the scene… however, it does not seem to have any effect on the object I am trying to attach it to… How do you correctly detach an object without removing it?

Well I was able to detach the object and apply transforms… problem I now face is that once it is transformed and I reattach it to the skeleton it reverts back to where it was before I transformed it… How do I properly reattach it so that it keeps the transform? so far:

            var slot = avatar.userData[control];
            scene.remove( control );
            var $bone="Hips";
            var parent = avatar.getObjectByName("Base_Body"); 
            var child = scene.getObjectByName(slot); 
            var parentBone = avatar.getObjectByName($bone);
            child.matrixAutoUpdate = false;
            child.matrixAutoUpdate = true;   
            SceneUtils.attach(child, child.parent, parentBone);  
            child.bindMode = "attached";
            child.skeleton = parent.skeleton;
            child.matrixAutoUpdate = false;
            child.matrixAutoUpdate = true;       
            parent.matrixAutoUpdate = false;
            parent.matrixAutoUpdate = true;                 
            child.frustumCulled = false;        
            scene.needsUpdate = true;   
            var section = 'none';

Figured out how to center the Transform Control on the object… for those who need it:

    var geometry = mesh.geometry;
    var center = new THREE.Vector3();
    geometry.boundingBox.getCenter( center );
    mesh.localToWorld( center );
    control.attach( mesh );

Now to the other issue… We stopped the mesh from going back to it’s original state after transform by the following:

child.geometry.applyMatrix( child.matrix );

Problem is that the position moves it to the bounds of the object it’s attached to afterwards. The rotation and size remains the same… not sure what’s going on here but it is progress…

I’m of the opinion that the transform controls suck and do not work in a predictable way in real use. Probably why nobody has offered any assistance. I should be able to manipulate an object and attach it to another without it’s position, rotation and scale to change in any way.

Well, I think I understand why it’s offset. Even though I have detached the mesh from the bone… it still has the skeleton which it shares with another skinned mesh. The pivot point is center of the skeleton. I’m kind of at a loss here how to convert it to a regular mesh so that I can apply transforms to it…