three.js bone control/ visualization and skeleton animation - three.js

Question

How to visualize the skeleton correctly? I feel like I did it right, but somehow the skeleton is not shown.
How do I specify the bone position/rotation in x,y,z axis in separate guiControls for each bone in GUI, such as "Bone_0.x" instead of "Bone_0"? Right now each 'Bone_0' is controlling both rotation and position... Or is there a way to control the bones by clicking on the bone, and use key input to translate/rotate, such as 'g'+'x' to translate the bone in x axis?
Thanks in advance!
//load file
let mixer;
const loader = new THREE.GLTFLoader();
loader.load('js/simple.gltf', function (gltf) {
scene.add(gltf.scene);
const model = gltf.scene;
mixer = new THREE.AnimationMixer(model);
gltf.animations.forEach((clip) => {
mixer.clipAction(clip).play();
});
helper = new THREE.SkeletonHelper(model);
helper.material.linewidth = 3;
helper.visible = true;
scene.add(helper);
////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);
});
//RENDER LOOP
render();
function render() {
controls.update();
var delta = 0.75 * clock.getDelta();
if (mixer) {
mixer.update(delta);
}
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;
}
});
renderer.render(scene, camera);
requestAnimationFrame(render);
};

Answer 1

Something wrong in the model, the code is correct.
Use Bone_0_x to specify axis, such as folder.add(guiControls, 'Bone_0_x', -3.14, 3.14);
Or:
var datGUI = new dat.GUI();
var folder = datGUI.addFolder('Controls');
var bones = 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' );
// ...
}
https://discourse.threejs.org/t/bone-properties/4076