I am aiming to create a skeletal structure with three bones, each joint represented by a sphere. For instance, the arm would have spheres on the shoulder, elbow, and wrist.
Most resources I came across utilize JSON loaders for skeleton construction. Referring to the Three.js documentation, I devised this code that currently displays three spheres at coordinates (0, 0, 0).
//code snippet within my init() function
var bones = [];
var shoulder = new THREE.Bone();
var elbow = new THREE.Bone();
var wrist = new THREE.Bone();
//connecting the bones
shoulder.add(elbow);
elbow.add(wrist);
//defining default positions of the bones
shoulder.position.set(1, 1, 1);
elbow.position.set(1, 1, 2);
wrist.position.set(1, 1, 3);
//collating all bones into an array for the skeleton
bones.push(shoulder);
bones.push(elbow);
bones.push(wrist);
//global variable in my script
skel = new THREE.Skeleton(bones);
var m = new THREE.MeshPhongMaterial( { color: 0xffff00, emissive: 0x072534, shading: THREE.SmoothShading} );
//creating geometry for the spheres
var g1 = new THREE.SphereGeometry(0.2, 100, 100);
var g2 = new THREE.SphereGeometry(0.2, 100, 100);
var g3 = new THREE.SphereGeometry(0.2, 100, 100);
for (var i = 0; i < g1.vertices.length; i++){
// assigning bone indices and weights to each vertex of the geometry
g1.skinIndices[i] = new THREE.Vector4(0, 0, 0, 0);
g1.skinWeights[i] = new THREE.Vector4(1, 0, 0, 0);
g2.skinIndices[i] = new THREE.Vector4(1, 0, 0, 0);
g2.skinWeights[i] = new THREE.Vector4(1, 0, 0, 0);
g3.skinIndices[i] = new THREE.Vector4(2, 0, 0, 0);
g3.skinWeights[i] = new THREE.Vector4(1, 0, 0, 0);
}
//creating skinned meshes
var s1 = new THREE.SkinnedMesh(g1, m);
var s2 = new THREE.SkinnedMesh(g2, m);
var s3 = new THREE.SkinnedMesh(g3, m);
//associating meshes with bones.
//This seems to be causing issues
s1.add(skel.bones[0]);
s1.bind(skel);
s2.add(skel.bones[1]);
s2.bind(skel);
s3.add(skel.bones[2]);
s3.bind(skel);
scene.add(s1);
scene.add(s2);
scene.add(s3);
I have implemented render() and animate() functions capable of showing basic geometry. These are excluded here to eliminate unnecessary details.
Frankly, I am uncertain about the purpose of s1.add(skel.bones[0]) and s1.bind(skel): based on an example I encountered, I attempted to mimic the syntax but it does not produce the desired outcome. My goal is simply to position each sphere differently while utilizing the skeleton for animation purposes.