I can't get the 3D coordinates of a bone in Three.js

cafecommuter

I've read other posts about how to get the coordinates of a bone but they are not working for me. I have loaded my skeleton at the root of the scene 0,0,0. I access the bone by using skeleton.findeBone('boneName'). When I inspect the bone.worldX and bone.worldY values they are no where near what they should be in the 3D coordinate space. Also, why isn't there a bone.worldZ value?

Nate

Bone world coordinates are in the 2D space of the skeleton, not the 3D coordinate space that the skeleton is in. You need to transform the world coordinates from the skeleton to your 3D coordinates. This may be as easy as adding the world coordinates to your skeleton position in 3D space.

cafecommuter

Hi Nate, that makes sense that the coordinates are in the 2D space of the skeleton. How do I transform the world coordinates of the skeleton to 3D coordinates?

You need to transform the world coordinates from the skeleton to your 3D coordinates.

Does the spine API have methods for doing this?

This may be as easy as adding the world coordinates to your skeleton position in 3D space.

How do I set the skeletons position?

Nate

How a skeleton is positioned and how the coordinates are transformed from the skeleton's space to the game toolkit's space is specific both to each game toolkit and your application code. If your app code is something like the spine-threejs example then the skeleton is attached to a mesh. To move the skeleton, you could move the mesh around in your 3D scene. I'm not very experienced with three.js so I'm not sure on the coordinate mapping, but probably a bone world position maps to a position on the mesh's material. You'd need to transform that to world 3D space, maybe using Object3D.localToWorld. You may get better help three.js specific help from the three.js community, otherwise our resident three.js expert, Mario, will be along Monday to help you further.

Mario

Object3D.localToWorld should indeed do the trick. You can set the z-coordinate of the input vector to 0.

cafecommuter

Hi @Mario , I've done the following but I still don't know how to position the Object3D to the bone's world position while the skeleton animates. Below is an example of what I'm doing but the Object3D (called box in the sample) ends up no where near where the bone is located. Could you help?

// Init Function
// Load the skeleton
...
atlas = assetManager.require(ATLAS_PATH);
  atlasLoader = new AtlasAttachmentLoader(atlas);
  skelBinary = new SkeletonBinary(atlasLoader);

  skeletonData = skelBinary.readSkeletonData(assetManager.require(SKEL_PATH));

  skelMesh = new SkeletonMesh(skeletonData, (params) => {
    params.depthTest = true;
    params.depthWrite = true;
    params.alphaTest = 0.001;
  });

// Add the skeleton to the platform at 0,0,0
const platform = new Object3D();
platform.add(skelMesh);
scene.add(platform);

// Create a box and position to where the bone is by eye
const boxHelperMesh = new THREE.Mesh(new THREE.BoxGeometry(0.1, 0.1, 0.1), new THREE.MeshBasicMaterial({ color: 0xFFF, wireframe: true }));
const box = new Object3D();
// Where the hair of the character is located in 3D space which is where the bone is
box.position.set(-0.08, 1.87, 0);
box.add(boxHelperMesh);
scene.add(box);

// Get the bone where the hair is located
const bone = skelMesh.skeleton.findBone('Hair');
// Log the box's position for reference
console.log(box.position) // Vector3 {x: -0.08, y: 1.87, z: 0}
// Here I set the box's localToWorld to the bone's world x and y.
// Is there anything else I should be doing??
box.localToWorld(new THREE.Vector3(bone.worldX, bone.worldY, 0));

skelLoaded = true;
...

// Later in the animate function try and set the box's position to the bone
...
if (skelLoaded) {
  skelMesh.update(delta);
  const bone = skelMesh.skeleton.findBone('Hair');

  // Here is where I want to position the box to the moving bone.
  // But the position is VERY wrong!
 // The hair and head do not move much, so I'm expecting to see values slightly
 // different than the initial position. But values for x and y are in the 100s. 
 box.position.set(bone.worldX, bone.worldY, 0);
}

Mario

I've opened an issue here:
EsotericSoftware/spine-runtimes2278

I'll add an example that places a box on some bone on the raptor model. Hope I can get to it today.

cafecommuter

Great, thanks Mario! I am away on holiday this week but I’ll check when I get back on Tuesday next week.

cafecommuter

Hi Mario have you had a chance to work on this?

Mario

Sorry, haven't gotten to it. Should get it done today or tomorrow.

Mario

I've just added a simple example to the 4.1 branch:
https://github.com/EsotericSoftware/spine-runtimes/blob/54cc75c20316a5df5e16898600e33a23f5fa55c4/spine-ts/spine-threejs/example/coordinate-transform.html

The basic gist:

Get a reference to the bone you are interested in via SkeletonMesh.skeleton.findBone("bone-name")
Update the SkeletonMesh so the current animations are applied and the pose is calculated. This will ensure the Bone.worldX and Bone.worldY fields are up-to-date for all bones.
Transform the Bone.worldX and Bone.worldY coordinates, which are relative to the SkeletonMesh to world coordinates via let pos = new THREE.Vector3(bone.worldX, bone.worldY, 0); skeletonMesh.localToWorld(pos);
Apply the world position to your other ThreeJS object via object.position.set(pos.x, pos.y, pos.z);.

Note that step 4 only works if the object is not the child of another object, i.e. directly added to the scene. If you want to do the above for an object that is a child of another object (parent), you'll need another step:

parent.worldToLocal(pos); object.position.set(pos.x, pos.y, pos.z);

cafecommuter

Thanks @Mario! This works perfectly 🙂