Saving the meshes and materials separately from a GLTF model

Questions
1

Is there a way to save meshes and materials separately from a GLTF model ?

I am building a vrm-avatar, and I would like to interchange the meshes and materials so the avatar could be customizable.

Therefore I want to save the meshes and materials separately in some format (not sure which), and load them, whenever necessary, and re-render the vrm-avatar updated mesh or materials.

Is is possible to do this ? Or perhaps there is a project similar to this ?
Thank you !

1 Like
2

Most objects in three.js support a .toJSON() method and can then be recreated with THREE.ObjectLoader. This would work for meshes or materials, separately or together.

The glTF format itself does also support writing meshes and materials to separate files, but THREE.GLTFExporter does not support that use case and you’d need to fork a custom version of it probably.

1 Like
3

Thank you very much! It is very helpful. I will try it out with Json.

4

I have created single-texture models in Blender and exported them without textures.
You can then load the gltf/glb mesh in three.js and add the texture separately within three.js.

To load the texture:

	texture = loader.load(texture_fname);
	materialA = new THREE.MeshBasicMaterial({map: texture, transparent: true});

To load the mesh, use something like this:

function loadFile(n) {
	gltfLoader.load(mesh_fname,
		function (gltf) {
			gltf.scene.traverse(function (child) {
				if (child.isMesh) {
					child.material = materialA;				
				}
			});
			ObjPtr[n] = gltf.scene;
			scene.add(ObjPtr[n]);
		},
		null, null
	);
}

You must make take care when exporting the Blender file that you do not strip the UV map since that is what positions the texture (speaking from experience). But that should not be a problem since Blender has the option to export the mesh only.

If your Blender object has more than one part, each part will be saved as a separate mesh, so you may need to identify each mesh by name and apply the appropriate texture. You can also enable things like shading. (You can look at the gltf/glb file with a text reader, like Notepad, to get the mesh names.)

5

Oh this is definetly very helpful.
I successfully saved and loaded mesh separately, and made huge progress in my project.
Thanks a lot !

6

Glad I could help.