10

I'm working on a 3D project using THREE.JS and I want to animate a simple minecraft like character.

To do so, I exported one from Blender (with bones) and I render it with THREE.JS using the SkinnedMesh class.

I tried everything to make the arm of the mesh to move but I can't figure out how to do it. I tried changing rotation, position, matrix and also setting all flag to true (like matrixWorldNeedsUpdate but the arm did not move).

Here is a sample code:

var meshBody = new THREE.SkinnedMesh( geometry, materialTexture );

...

animate = function(){
    meshBody.bones[3].rotation.z += 0.1     
    meshBody.bones[3].matrixAutoUpdate = true;
    meshBody.bones[3].matrixWorldNeedsUpdate = true;
}
user2026247
  • 149
  • 2
  • 8

2 Answers2

6

While constructing your mesh, make sure the skinning property of your material is set to true, e.g.:

mesh = new THREE.SkinnedMesh (geometry, 
          new THREE.MeshBasicMaterial ({color: 0xaaaa00, skinning: true})
     );
Mohamed A. Maksoud
  • 71
  • 2
  • 3
  • Hmm, when I do this the model disappears. On this tutorial [link](https://devmatrix.wordpress.com/2013/02/27/creating-skeletal-animation-in-blender-and-exporting-it-to-three-js/) it mentions naming the bones with the same as vertex groups. Sounds a bit weird but I tried it and it made no difference... – robshearing Sep 01 '15 at 07:55
  • Okay I got it now. I need to add more than one vertex. – robshearing Sep 02 '15 at 02:16
  • @robshearing If you found a solution, can you answer my question ? :) https://stackoverflow.com/questions/60036248/how-to-manipulate-individual-bones-of-a-3d-model-in-react-native – Rahul Iyer Feb 18 '20 at 09:04
0

It uses quaternion rotations by default. Try to set meshBody.bones[i].useQuaternion = false; and then change rotation's params or use quaternions instead.

vadimrostok
  • 131
  • 7