aframe, TransformControls is not working about 3D object

Question

this picture is no problem. but under picture is problem.

I am using aframe and https://threejs.org/docs/#examples/en/controls/TransformControls

<a-scene embedded>
<!--
    <a-entity data-type="entity" id="yellowSphere" geometry="primitive: sphere" material="color:#ff0; metalness:0.0; roughness:1.0" position="-2 2 -2"></a-entity>
-->
    <a-entity gltf-model="url(https://cdn.aframe.io/examples/ar/models/triceratops/scene.gltf)" animation-mixer scale="0.1 0.1 0.1"></a-entity>

    <a-sky data-type="sky" color="#fff"></a-sky>
</a-scene>

this.transformControls = new TransformControls(this.camera, this.canvasEl);
this.transformControls.size = 0.75;
this.transformControls.addEventListener('objectChange', (evt) => {
    const object = this.transformControls.object;
    if (!object) {
        return;
    }

    console.log(evt, object);
    this.selectionBox.setFromObject(object).update();
});

Answer 1

The code is trying to move the skinnedMesh, not the root mesh.

One solution would be adding a check for Mesh, and if there isn't one, find it with getObject3D('mesh'):

/* TransformControls, line 546 */
// Set current object
attach( object ) {
  if (object.type != "Mesh") {
    object = object.el.getObject3D("mesh") // this is the solution mentioned above
  }
  this.object = object;
  this.visible = true;
  return this;
}

glitch here