jongomez
commented
9 months ago Hey @dtechmaster ! From your description, I think you're almost there. It looks like you didn't use blender to export the model to .glb though - I'm not 100% sure if changing the .vrm extension to .glb is enough. But, maybe it is.
If you open up the dev tools console, you may see some log messages that may help. For example:
In the screenshot above, the face mesh name is incorrect. The face mesh is where the mouth moving and eye closing morph targets are. So, no face mesh, no mouth and eye animations. Small note: the face mesh doesn't necessarily need to be the "face" - it just needs to be a mesh where the mouth and eye morph targets are.
So that's 1 thing we need - the name of the mesh where the mouth morph targets are. After we have the correct name of this mesh, we need to set that in the model's config - constants.ts file, using the faceMeshName property. Here's where I set it for the default model I'm using.
One way to find out the face mesh name is: in blender, click on the face of your VRoid model. Here's a screenshot of blender, where you can see on the top right outliner there's a mesh called "Face":
Also notice on the bottom right, I can see all the morph targets in the face mesh, under "Shape Keys". This is where the mouth and eye movement morph targets should be. In my case, the names of the Shape Keys all start with "Face.M_F00_000_00_Fcl_". In your case, the names may be different. We then need update the config with the names of these Shape Keys. Here's where I set them for the default model config.
Please note though: I've seen 1 case where the mesh name in blender was not the same as the mesh name in BabylonJS. This was because the face had more than 1 material. And, somewhere along the conversion process, the mesh was divided into multiple sub meshes with 1 material each. You can easily check if this is the case, by going to the setMeshFace function, and adding at the start of the function:
for(const mesh of this.meshes) console.log("Mesh name is:", mesh.name)
With this, you can check the real names of the meshes in BabylonJS. The mesh with the morph targets should be one of those. That is, if the morph targets exist. But, if you exported the model from VRoid Studio, they should exist.
Hope this helps. If anything else pops up, let me know.
dtechmaster
Hello, first of all, great app! very helpfull for people whos leaning this kind of stuff! congratz! maybe I missed some docs but, how did you manage to convert the VRoid model to work on this app?
What I've tried: 1 - create a model on VRoid Studio 2 - export to vrm 3 - change the file extention from .vrm to .glb
results: it loads into the application but the models mouth don't move...
can you share how did you created the vroid_girl1? thank very much!