webgl_loader_mmd_pose.html does not work

[CYBYOB]

Description

Reproduction steps

Code

// code goes here
                count = 1;
                let camera, scene, renderer, effect;
                let mesh, helper;

                const vpds = [];

                // import('https://threejs.org/examples/jsm/libs/ammo.wasm.js').then(function (AmmoLib) {
                import('three/examples/jsm/libs/ammo.wasm.js').then(function (AmmoLib) {
                    // debugger;

                    window.Ammo = AmmoLib;

                    init();
                    animate();

                });

                // Ammo().then(function (AmmoLib) {
                //     debugger;

                //     Ammo = AmmoLib;

                //     init();
                //     animate();

                // });

                // init();
                // animate();

                function init() {

                    const container = document.createElement('div');
                    document.body.appendChild(container);

                    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
                    camera.position.z = 25;

                    // scene

                    scene = new THREE.Scene();
                    scene.background = new THREE.Color(0xffffff);

                    const ambient = new THREE.AmbientLight(0xaaaaaa, 3);
                    scene.add(ambient);

                    const directionalLight = new THREE.DirectionalLight(0xffffff, 3);
                    directionalLight.position.set(- 1, 1, 1).normalize();
                    scene.add(directionalLight);

                    //

                    renderer = new THREE.WebGLRenderer({ antialias: true });
                    renderer.setPixelRatio(window.devicePixelRatio);
                    renderer.setSize(window.innerWidth, window.innerHeight);
                    container.appendChild(renderer.domElement);

                    effect = new OutlineEffect(renderer);

                    // model

                    function onProgress(xhr) {

                        if (xhr.lengthComputable) {

                            const percentComplete = xhr.loaded / xhr.total * 100;
                            console.log(Math.round(percentComplete, 2) + '% downloaded');

                        }

                    }

                    const modelFile = threejsRootPrefix + 'models/mmd/miku/miku_v2.pmd';
                    const vpdFiles = [
                        threejsRootPrefix + 'models/mmd/vpds/01.vpd',
                        threejsRootPrefix + 'models/mmd/vpds/02.vpd',
                        threejsRootPrefix + 'models/mmd/vpds/03.vpd',
                        threejsRootPrefix + 'models/mmd/vpds/04.vpd',
                        threejsRootPrefix + 'models/mmd/vpds/05.vpd',
                        threejsRootPrefix + 'models/mmd/vpds/06.vpd',
                        threejsRootPrefix + 'models/mmd/vpds/07.vpd',
                        threejsRootPrefix + 'models/mmd/vpds/08.vpd',
                        threejsRootPrefix + 'models/mmd/vpds/09.vpd',
                        threejsRootPrefix + 'models/mmd/vpds/10.vpd',
                        threejsRootPrefix + 'models/mmd/vpds/11.vpd'
                    ];

                    helper = new MMDAnimationHelper();

                    const loader = new MMDLoader();

                    loader.load(modelFile, function (object) {

                        mesh = object;
                        mesh.position.y = - 10;

                        scene.add(mesh);

                        let vpdIndex = 0;

                        function loadVpd() {

                            const vpdFile = vpdFiles[vpdIndex];

                            loader.loadVPD(vpdFile, false, function (vpd) {

                                vpds.push(vpd);

                                vpdIndex++;

                                if (vpdIndex < vpdFiles.length) {

                                    loadVpd();

                                } else {

                                    initGui();

                                }

                            }, onProgress, null);

                        }

                        loadVpd();

                    }, onProgress, null);

                    //

                    window.addEventListener('resize', onWindowResize);

                    function initGui() {

                        const gui = new GUI();

                        const dictionary = mesh.morphTargetDictionary;

                        const controls = {};
                        const keys = [];

                        const poses = gui.addFolder('Poses');
                        const morphs = gui.addFolder('Morphs');

                        function getBaseName(s) {

                            return s.slice(s.lastIndexOf('/') + 1);

                        }

                        function initControls() {

                            for (const key in dictionary) {

                                controls[key] = 0.0;

                            }

                            controls.pose = - 1;

                            for (let i = 0; i < vpdFiles.length; i++) {

                                controls[getBaseName(vpdFiles[i])] = false;

                            }

                        }

                        function initKeys() {

                            for (const key in dictionary) {

                                keys.push(key);

                            }

                        }

                        function initPoses() {

                            const files = { default: - 1 };

                            for (let i = 0; i < vpdFiles.length; i++) {

                                files[getBaseName(vpdFiles[i])] = i;

                            }

                            poses.add(controls, 'pose', files).onChange(onChangePose);

                        }

                        function initMorphs() {

                            for (const key in dictionary) {

                                morphs.add(controls, key, 0.0, 1.0, 0.01).onChange(onChangeMorph);

                            }

                        }

                        function onChangeMorph() {

                            for (let i = 0; i < keys.length; i++) {

                                const key = keys[i];
                                const value = controls[key];
                                mesh.morphTargetInfluences[i] = value;

                            }

                        }

                        function onChangePose() {

                            const index = parseInt(controls.pose);

                            if (index === - 1) {

                                mesh.pose();

                            } else {

                                helper.pose(mesh, vpds[index]);

                            }

                        }

                        initControls();
                        initKeys();
                        initPoses();
                        initMorphs();

                        onChangeMorph();
                        onChangePose();

                        poses.open();
                        morphs.open();

                    }

                }

                function onWindowResize() {

                    camera.aspect = window.innerWidth / window.innerHeight;
                    camera.updateProjectionMatrix();

                    effect.setSize(window.innerWidth, window.innerHeight);

                }

                //

                function animate() {

                    requestAnimationFrame(animate);
                    render();

                }

                function render() {

                    effect.render(scene, camera);

                }
            

Live example

nope

Screenshots

No response

Version

r

Device

No response

Browser

No response

OS

No response

[Mugen87]

"Does not work" is not a proper description of a bug.

I suggest you provide a description that explains the problem in detail. Also share information about your device, browser and OS. The respective sections in the issue template are not present just for fun.

We can then reopen the thread.