Material renders different after applying animation to mesh



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:

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:

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.


Is it possible to provide a live demo with your code? Something like


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:


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


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