I am trying to load a model of a mechanism, like a robot arm, into Three.js. Unfortunately, the models I have do not come with a skeleton, but I do have the information about joint locations, axes, and orientations. I want to use inverse kinematic solvers like Three-IK, so I need to create a skeleton based on these parameters. Since I plan on using various models, I would rather generate the skeletons programmatically instead of manually creating them.
Despite my efforts for more than a week, I have not been successful in creating a valid bone structure that accurately represents the model. For example, when I attempt to create a chain of bones using joint positions, the resulting skeleton is long and does not match the intended positions.
let boneParent;
let bonepos = [];
let bones = [];
model.traverse(child => {
switch(child.type) {
case "joint":
let p = new Vector3();
child.getWorldPosition(p);
bonepos.push(p);
let bone = new Bone();
boneParent && boneParent.add(p);
bone.worldToLocal(p.clone());
bone.position.copy(p);
bone.rotation.copy(child.rotation);
bone.scale.copy(child.scale);
boneParent = bone;
bones.push(bone);
break;
}
});
showPoints(scene, bonepos, 0xff0000);
const skeletonHelper = new SkeletonHelper(bones[0]);
skeletonHelper.visible = true;
scene.add(skeletonHelper);
The code snippet above produces the screenshot depicted below. The red markers represent the joint positions obtained from the robot, while the line extending into the distance showcases the visualized skeleton through the SkeletonHelper tool.
https://i.sstatic.net/HFkIc.png
My dilemma is this: it appears I may not have a deep enough understanding of how bones are managed within Three.js. How can I go about generating a skeleton that accurately mirrors my existing model based on its joint coordinates and orientations?
Thank you in advance!
Attention future visitors: Rocksi is an open-source project!