Question

如何正确显示骨骼？我觉得我做对了，但是以某种方式没有显示骨骼。
如何为GUI中的每个骨骼（例如“ Bone_0.x”而不是“ Bone_0”）在单独的guiControl中指定x，y，z轴上的骨骼位置/旋转？现在，每个“ 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

模型出了点问题，代码正确。
使用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

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

1 个答案: