三.js骨骼控制/可视化和骨骼动画

Question

1. 如何正确可视化骨架？我觉得我做对了，但不知何故没有显示骨架。
2. 如何在单独的 guiControls 中为 GUI 中的每个骨骼指定 x，y，z 轴上的骨骼位置/旋转，例如"Bone_0.x"而不是"Bone_0"？现在每个"Bone_0"都在控制旋转和位置......或者有没有办法通过单击骨骼来控制骨骼，并使用按键输入进行平移/旋转，例如"g"+"x"在 x 轴上平移骨骼？

提前感谢！

//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

1. 模型中有问题，代码是正确的。
2. 使用Bone_0_x指定轴，例如folder.add(guiControls, 'Bone_0_x', -3.14, 3.14);

或：

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