Material renders different after applying animation to mesh

Questions
,
1

Hi. I’m using latest (at the time of writing) version of Threejs.

I have created the following MeshPhongMaterial:

defaultBodyMaterial = new THREE.MeshPhongMaterial({
	color : new THREE.Color(0.047058823529411764, 0.5058823529411764, 0.45098039215686275),
	emissive: new THREE.Color(0.7176470588235294, 0.3568627450980392, 0.7254901960784313), 
	specular: new THREE.Color (0.592156862745098, 0.48627450980392156, 0.47843137254901963 )
					});

and applied this material to my mesh and set the morphTargets to true:

   bodyMesh.material = defaultBodyMaterial;
   bodyMesh.material.morphTargets = true;

When I dont apply any animation to the mesh, it renders as follows:

photo_2018-04-06_09-01-28

When I apply the following animation:

                mt = bodyMesh.geometry.morphTargets;
	    mixer = new THREE.AnimationMixer(bodyMesh);
	   var allAntennTwitch = THREE.AnimationClip.CreateFromMorphTargetSequence('4', [mt[0], mt[1], mt[2], mt[3]], 30);
	   clipActionDefault = mixer.clipAction(allAntennTwitch).setDuration(1).play();

the material renders like this:
29%20(2)

As you can see the specularity looks a bit strange. And when I use MeshNormalMaterial the colours are orange and green rather than the usual rainbow. So I am guessing the vector normals are changed in some way that they shouldnt be by the animation but I am not quite sure how that would be.

2

Is it possible to provide a live demo with your code? Something like https://jsfiddle.net/f2Lommf5/

3

Hi Michael! I am just in the midst of an important job this week, but I will post a live demo asap. Until then you can also see the code here:

Er, excuse the strange function titles, my work is animation of a snail that gets gradually more and more excited on touch events…it’s for an art project! :slight_smile:

4

Try to set bodyMesh.material.morphNormals to true and do:

bodyMesh.geometry.computeVertexNormals();
bodyMesh.geometry.computeMorphNormals();

This should ensure that lighting remains consistent when morph target animations is performed.

5

Nice, thank you. This definitely solves the original problem, but seems to create a new one. The animations now looks strange - some of them appear to only be applied to the whole mesh rather than its vertices? I’m not exactly sure what’s going on. I did have some problems getting these animations from Blender to json format - maybe there was either some problems with the exporter or with my workflow. Originally I tried to export some keyframe animations which were using a series of morph targets to animate the mesh. Unfortunately the keyframe animations weren’t exported correctly so I ended up construction animation clips from the morph targets which did export correctly (some didn’t).

mt = bodyMesh.geometry.morphTargets;
mixer = new THREE.AnimationMixer(bodyMesh);
var allAntennTwitch = THREE.AnimationClip.CreateFromMorphTargetSequence('4', [mt[0], mt[1], mt[2], mt[3]], 30);
var tailTwitch = THREE.AnimationClip.CreateFromMorphTargetSequence('11', [mt[4], mt[7]], 30);					
var quakeMore = THREE.AnimationClip.CreateFromMorphTargetSequence('9', [mt[5], mt[6]], 30);

Strangely trying to use the morph targets directly by changing the value between 0 and 1 also resulted in incorrect animation…