Cannot load animation loaders

[johnwwk]

Hi
I am trying to load animations but getting below errors. Our app uses three-133 so I tried forking the repo and updating three version to 133 and 137. Tried calling models from imported Three, as written here without success. I am trying to load VMD animation (that works with three-pixie and others) but when I load your BVHs they don't work as well. Looks like BHVs in your demo don't work too, the console gives out some three issues. This is a very nice component you have here and want to use it in production, will be glad if you have an idea about the issue. thank you.

ERROR in ./node_modules/@binzume/aframe-vrm/dist/aframe-vrm.module.js
Module not found: Error: Can't resolve 'https://threejs.org/examples/jsm/animation/CCDIKSolver.js' in  /@binzume/aframe-vrm/dist'
 
ERROR in ./node_modules/@binzume/aframe-vrm/dist/aframe-vrm.module.js
Module not found: Error: Can't resolve 'https://threejs.org/examples/jsm/loaders/BVHLoader.js' in ' node_modules/@binzume/aframe-vrm/dist' 

ERROR in ./node_modules/@binzume/aframe-vrm/dist/aframe-vrm.module.js
Module not found: Error: Can't resolve 'https://threejs.org/examples/jsm/loaders/BVHLoader.js' in 'node_modules/@binzume/aframe-vrm/dist'
 @ ./node_modules/@binzume/aframe-vrm/dist/aframe-vrm.module.js 576:30-93
 @ ./src/react-components/parts/AvatarItem.js
 @ ./src/react-components/create/CreatePage.js
 @ ./src/create.js

 

[binzume]

Hi,
Thank you for the reporting!

aframe-vrm.js loads animation modules from threejs.org, but it no longer works because the module resolving on the site has changed.

I added following importmap ( https://github.com/WICG/import-maps ) to htmls as a workaround.

<script type="importmap">{"imports": {"three": "https://threejs.org/build/three.module.js"}}</script>

On my end, it works fine on the latest Chrome, but for future stability, this should be resolved at build time, without relying on threejs.org.

I can't start working on it right away :-), so I have added a new issue: #4

[johnwwk]

Thank you and sorry for the late reply. I could not solve it as you wrote but I could solve it by pulling your latest updates, forking the repo, putting BVHLoader.js, CCDIKloader.js, and MMDLoader.js under the utils folder, and linking them as below on vmd.ts
let { MMDLoader } = await import('./MMDLoader.js');
let { CCDIKSolver } = await import('./CCDIKSolver.js');
and as below on bvh.ts
let { BVHLoader } = await import('./BVHLoader.js');
I didn't see anything in the console but maybe somehow it was a cors or webpack issue on my side...

there was also another error on dist/aframe-vrm.module.js that I think is not directly related to animations

ERROR in /dist/aframe-vrm.module.js 186:65
Module parse failed: Unexpected token (186:65)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     this.model.traverse((obj) => {
|       let mesh = obj;
>       mesh.isMesh && (mesh.geometry.dispose(), mesh.material.map?.dispose()), obj.skeleton && obj.skeleton.dispose();
|     });
|   } 

I couldn't figure out what was happening so commented out the dispose function...obviously, this may break something but so far looks like everything works fine...later on if I can solve it I will send a pull request

dispose() {
/*
for (let m of Object.keys(this.modules))
this.removeModule(m);
this.model.traverse((obj) => {
let mesh = obj;
mesh.isMesh && (mesh.geometry.dispose(), mesh.material.map?.dispose()), obj.skeleton && obj.skeleton.dispose();
});
*/
}