Distorted mesh when rotating group in Three.JS

Bit of context, I have two skinned meshes with the same bone structure that over lap each other. The difference between these two meshes is what they have attached to them and where. For the purpose of this question I will be referring to the body and hand skinned meshes.

I am trying to rotate both the body forearm and hand forearm at the same time and in the same direction. I have added both to the group leftforearmgroup which is a child group. The group structure present is bodygroup > leftclaviclegroup > leftarmgroup > leftforearmgroup.

The issue I am running into is when I attempt to rotate the leftforearmgroup it distorts as shown in the image below. The other image shows how it should behave, this is achieved by attaching the control directly to the body forearm which won’t control the hand forearm sadly. Every other group when rotated via TransformControl behaves as expected.

distorted mesh when rotating

correct mesh behavior

So my question is how do I fix the mesh from being distorted when rotating?

Code:

const headaccgroup = new THREE.Group();
headaccgroup.position.set(0, -15, 0);
headaccgroup.rotateY(THREE.Math.degToRad(180));

const headgroup = new THREE.Group();
headgroup.scale.set(1, 1, 1);
headgroup.position.set(0, 0.38, 0.028);
headgroup.rotateY(THREE.Math.degToRad(0));


const bodygroup = new THREE.Group();

bodygroup.rotateY(THREE.Math.degToRad(180));

const leftclavgroup = new THREE.Group();
leftclavgroup.scale.set(1, 1, 1);
leftclavgroup.position.set(-0.055, -0.055, 40);
leftclavgroup.rotateY(THREE.Math.degToRad(0));



const leftarmgroup = new THREE.Group();
leftarmgroup.scale.set(1, 1, 1);

leftarmgroup.position.set(-0.055, -0.055, 0);
leftarmgroup.rotateY(THREE.Math.degToRad(180));

const leftforearmgroup = new THREE.Group();
leftforearmgroup.scale.set(1, 1, 1);
leftforearmgroup.position.set(0,0,0); 



 function loadBody(modelPath, x = 0.1, y = 0.1, z = 0.1) {
        gltf_loader.load(modelPath, function (gltf) {
         
        
          scene.remove(body);
          
          body = gltf.scene;

         
         
          gltf.scene.traverse(function(object) {
if(object.isMesh) object.frustumCulled = false;

});
               
          gltf.scene.scale.set(x, y, z);
         body.position.set( 0, -2, 20);

         leftforearmgroup.add( body.getObjectByName('bip02_l_forearm')); 

          controlleftforearm.attach(leftforearmgroup);
          controlleftforearm.setMode('rotate');
          scene.add(controlleftforearm);

        leftarmgroup.add(body.getObjectByName('bip02_l_upperarm'));
          leftclavgroup.add(body.getObjectByName('bip02_l_clavicle')); 
         
         
          leftarmgroup.add(leftforearmgroup);
         leftclavgroup.add(leftarmgroup);
          
          bodygroup.add(leftclavgroup);   
          

          headgroup.add(body.getObjectByName('bip02_head'));

          bodygroup.scale.set( 10, 10, 10);
          bodygroup.add(body.getObjectByName('bip02_spine1')); 
          
          bodygroup.add(headgroup);
          scene.add(body);
          
        

          controlspine1.attach(bodygroup);
          controlspine1.setMode('rotate');
          scene.add(controlspine1);
        });

      }

Hi @biglow230 Im not sure but I think you are breaking the skeleton hierarchy. Take a look how skeletons (skinnedMesh) works threejs

1 Like

When I place the clavicle into a group and child the upperarm into the clavicle it works as expected.

Consequently I figured I could also just rotate and control both by implementing quaternion but i’m unsure how to implement that.