GLTF Animations imported from blender won't play

Questions
, , ,
1

So, i have a 3d model created in blender and exported. The file is attached below if it’s needed. In it i have an armature with a wave animation. I would love to play it in three js as well, but i’m having some problems. I tried the method that everyone does and for some reason it doesn’t play the animation. Not only that, but the position of the armature is completely different than the one in blender. The good news is that a gltf viewer like https://gltf-viewer.donmccurdy.com/ loads it properly, so chances are something is wrong with my code. I’ve never done this before. Can anyone help?

contactCrate2.glb (703.5 KB)

this.gltfLoader.load(this.bakedModelUrls[this.index], gltf => {
			this.mixer = new THREE.AnimationMixer(gltf.scene);

			this.timer.runOnTick(() => {
				this.mixer.update(this.timer.getDelta());
			});

			gltf.animations.forEach(clip => {
				this.mixer.clipAction(clip).play();
			});

			gltf.scene.traverse(child => {
				if (!child.isObject3D) return;

				child.material = this.bakedMaterial;
			});

			this.scene.add(gltf.scene);
		});

Here are the code bits from the Timer class, just in case:

tick() {
		this.newTime = this.clock.getElapsedTime();
		this.deltaTime = this.newTime - this.oldTime;
		this.oldTime = this.newTime;

		this.functionsToRunOnTick.forEach(func => func());

		window.requestAnimationFrame(this.tick);
	}

getDelta() {
		return this.deltaTime;
	}
2

If you’re replacing materials that come on the model, you’ll need to make sure you set the right properties on the new material. Things like material.skinning = true or material.morphTargets = true would be set automatically by GLTFLoader, but with custom materials you must set them yourself.

3

Hi, thanks for the response. I tried adding skinning: true and morphTargets: true to the material, but it still doesn’t work. Luckily, I tested it with the original exported material as it is, and it works perfectly. but when i apply a baked material it doesn’t work. I’ll keep experimenting. Something must be different with the materials. Thanks for steering me in the right direction.

4

For anyone in the future wondering, here is what fixed my problem. I had to create 2 MeshBasicMaterials. One is just a normal mesh basic material with a texture and skinning set to false. The skinning property is important. This is the material you put on normal meshes. But for an instance of THREE.SkinnedMesh, i had to create a clone of the mesh basic material with the texutre, and set skinning to true. Skinned meshes get materials with skinning true, normal meshes with skinning false.