GLTFLoader() animation problem

Questions
1

Hello all. I first want to show the context of my problem.

I have an avatar which will be able to change clothes and be animated. In order to make that, I import fbx files of the main body and each piece of clothes individually, all parts already rigged on the same rig system. Add all parts to to the same group and on each imported fbx I do this.mixer._root.add(fbxObject);

This works…80% of them time. When I play the animation…sometimes i need to play it twice to work. Sometimes some parts of the group move and others dont. Sometime everything moves.

So I tried a new approach. Tried to export the entire avatar, fully clothed, with

const exporter = new THREE.GLTFExporter();

And then import the exported file with

let loader = new THREE.GLTFLoader();
loader.load(str,(scene)=>{
	let object=scene.scene;
	object.receiveShadow = true;
	object.castShadow = true;
	object.frustumCulled = false;
	self._threeObj=object
	self.mixer._root.add(object);
	ige.client.mainScene._threeObj.add(object)
	ige.client.character.doAnimation('stop')

})

and run the animation. No parts are animated using this process.

Using fbx at least animated someparts. Its not great because sometimes it dont work for all parts and it copies the same skeleton multiple times which must have some issues on performance.

So how do you guys solve this issue?

2

Just make clear my concerns…

The current method of collecting multiple fbx from internet (one for body and other for each piece of clothes) and then loading and animating each part with the same animation worries me because sometimes some pieces dont load well…probably due to internet connection. That was my main reason for trying to load it all in a single file.

As there is no fbx exporter on threejs i tried to do that with gltf exporter. But something goes wrong when adding it to the animation mixer.

I also have great concerns about loading the same skeleton everytime for each part.

3

I’m afraid it’s not yet clear what you are asking for. It’s probably best if you focus on one particular question and try to formulate it as concrete as possible.

But looking at your code, the following won’t properly work:

You have to set these properties for all objects in the hierarchy like so:

const loader = new THREE.GLTFLoader();
loader.load(str,(gltf)=>{
	const model=gltf.scene;
	model.traverse(object=>{
		object.receiveShadow = true;
		object.castShadow = true;
		object.frustumCulled = false;
	});
	self._threeObj=model;
	self.mixer._root.add(model);
	ige.client.mainScene._threeObj.add(model);
	ige.client.character.doAnimation('stop');
});
4

My main problem is animation and performance.

If i create a group of boned meshes from several fbx files and add to the mixer, sometimes some parts of the meshes dont get animated. I think its because of internet issues.

If i import and entire group of meshes from a gltf file, what happens is nothing moves when added to the mixes.

5

Been studying the problem and I see there is a LOT of unanswered questions on the Threejs community about how to better tackle this avatar issue. I ended up with 2 options here and I would like an opinion on what is best

Option1: Load a single file with all geometries and materials and disable the geometries you dont want in scene.
The idea here is to make a file with the avatar and all the possible clothes he will use in a single file. Then for each instance of this avatar only hide the clothes he is not using and display those he is using. Seems pratical but it limits the amount of clothes the avatar can wear because otherwise the file size will be gigantic.

Second option: Load a single avatar file for the body and load each clothes piece individually and add to the avatar body mesh. I think this one gives more flexibility to avatar clothes creation…but my experience shows that this might cause bugs if connection makes the download incomplete.