Bone properties

Questions
, ,
1

Say I have two bones: Bone_0, Bone_1. I would like to create 6 GUI controls to control position on x, y, z and rotation on x,y,z for Bone_0, same for Bone_1. 12 GUI controls total.
I’ve assigned child.skeleton.bones[0].position.y = guiControls.Bone_0; Then what should I assign child.skeleton.bones[0].position.z ? I wasn’t able to find the ‘Bone_0’ properties.

 ////GUI
        guiControls = new function () {
            this.Bone_0 = 0.0;
            this.Bone_1 = 0.0;
        }

        datGUI = new dat.GUI();
        //datGUI.add(guiControls, "scene");
        var folder = datGUI.addFolder('Controls');

        folder.add(guiControls, 'Bone_0', -3.14, 3.14);
        folder.add(guiControls, 'Bone_0', -3.14, 3.14);

        folder.add(guiControls, 'Bone_1', -3.14, 3.14);
        folder.add(guiControls, 'Bone_1', -3.14, 3.14);



 scene.traverse(function (child) {
            if (child instanceof THREE.SkinnedMesh) {

                child.position.y += .01;

                child.skeleton.bones[0].position.y = guiControls.Bone_0;
                child.skeleton.bones[0].rotation.y = guiControls.Bone_0;

                child.skeleton.bones[1].position.y = guiControls.Bone_1;
                child.skeleton.bones[1].rotation.y = guiControls.Bone_1;

            }
        });
2

I find it’s easier to use dat.gui directly on the objects you want to modify. You can rename the controls to something clearer using .name( 'myname' ). For example:

var gui = new dat.GUI();
var folder = gui.addFolder('Controls');
var bones = child.skeleton.bones;

for ( var i = 0; i < bones.length; i++ ) {
  folder.add( bones[i].position, 'x', 0, Math.PI * 2 ).name( 'bones[' + i + '].position.x' );
  folder.add( bones[i].position, 'y', 0, Math.PI * 2 ).name( 'bones[' + i + '].position.y' );
  // ...
}
3 Likes
3

Nice, very efficient.