i cant load the blendshapes of the VRM file on the GUI ,

Questions
, ,
1

hi hope you doing well , i tried to load the VRM file and it worked perfect , but i need to load the blendershapes of the model on the GUI to test them but unfortunately its not working it Although i consle.log it and it there !!!

my code :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VRM Model with GUI</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
    <!-- Include Three.js -->
    <script src="https://cdn.jsdelivr.net/npm/three@0.110.0/build/three.min.js"></script>
    <!-- Include GLTFLoader -->
    <script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@r110/examples/js/loaders/GLTFLoader.js"></script>
    <!-- Include OrbitControls -->
    <script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@r110/examples/js/controls/OrbitControls.js"></script>
    <!-- Include pixiv three-vrm -->
    <script src="https://unpkg.com/@pixiv/three-vrm@0.3.0/lib/three-vrm.js"></script>
    <!-- Include dat.GUI -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
</head>
<body>
    <script>
        // Renderer
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // Camera
        const camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.1, 20);
        camera.position.set(0, 1, 5);

        // Camera controls
        const controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.screenSpacePanning = true;
        controls.target.set(0, 1, 0);
        controls.update();

        // Scene
        const scene = new THREE.Scene();

        // Light
        const light = new THREE.DirectionalLight(0xffffff);
        light.position.set(1, 1, 1).normalize();
        scene.add(light);

// Load VRM
const loader = new THREE.GLTFLoader();
loader.crossOrigin = 'anonymous';
loader.load(
    // URL of the VRM you want to load
    'male.vrm',
    // called when the resource is loaded
    (gltf) => {
        // Remove unnecessary joints
        THREE.VRMUtils.removeUnnecessaryJoints(gltf.scene);
        // Generate VRM instance from gltf
        THREE.VRM.from(gltf).then((vrm) => {
            console.log(vrm);
            // Log blendShapeProxy._blendShapePresetMap
            console.log("Blend Shape Preset Map:", vrm.blendShapeProxy._blendShapePresetMap);
            scene.add(vrm.scene);
            // Adjust bone rotations
            vrm.humanoid.getBoneNode(THREE.VRMSchema.HumanoidBoneName.Hips).rotation.y = Math.PI;
            // Create GUI
            createGUI(vrm.blendShapeProxy, vrm.blendShapeProxy._blendShapePresetMap);
        });
    },
    // called while loading is progressing
    (progress) => console.log('Loading model...', 100.0 * (progress.loaded / progress.total), '%'),
    // called when loading has errors
    (error) => console.error("Error loading VRM model:", error)
);

// Create GUI function
function createGUI(blendShapeProxy, blendShapeGroups) {
    // Create a new GUI instance
    const gui = new dat.GUI();
    
    // Iterate over blend shape groups
    blendShapeGroups.forEach((group) => {
        // Create a folder for the group
        const groupFolder = gui.addFolder(group.name);
        
        // Iterate over blend shapes in the group
        group.blendShapeList.forEach((blendShape) => {
            // Create a control for the blend shape
            const control = groupFolder.add(blendShapeProxy, blendShape.name, 0, 1).name(blendShape.name);
            control.onChange(() => {
                blendShapeProxy.setValue(blendShape.name, blendShapeProxy.getValue(blendShape.name));
                blendShapeProxy.update();
            });
            // Set initial value if available
            if (blendShape.initialValue !== undefined) {
                control.setValue(blendShape.initialValue);
            }
        });
        
        // Open the folder by default
        groupFolder.open();
    });
}

        // Animation loop
        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }
        animate();

        // Resize event listener
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
    </script>
</body>
</html>