Three js animate blender model with material colors

Question

I have an exported (three js json format) blender model. The model have a few material with colors. If i use THREE.MorphAnimMesh and THREE.MeshPhongMaterial the animation is working fine but no material colors. If i use THREE.MeshFaceMaterial it have colors but animation not working. The question is, how can i animate with material colors from the model js file?

animation working but no colors. the model is white:

var material = new THREE.MeshPhongMaterial({ morphTargets: true, morphNormals: true, vertexColors: THREE.FaceColors, shading: THREE.SmoothShading, perPixel: true }  );
var meshAnim = new THREE.MorphAnimMesh( geometry, material );

model have the material colors but animation not working:

var material  = new THREE.MeshFaceMaterial({ morphTargets: true, morphNormals: true, vertexColors: THREE.FaceColors });
var meshAnim = new THREE.MorphAnimMesh( geometry, material );

here is the model js file: http://speedy.sh/rs39u/skeleton-0.js

btw, i saw the flamingo.js file from the examples. It have a morphColors object but if i know right i cant export this from blender.

user974250 user974250 · Accepted Answer · 2012-12-17T13:23:43

Got it. Maybe someone can use it:

for (var i=0; i<geometry.materials.length; i++) {
    geometry.materials[i].morphTargets = true;
}
var material  = new THREE.MeshFaceMaterial({ morphTargets: true, morphNormals: true, vertexColors: THREE.FaceColors });
var meshAnim = new THREE.MorphAnimMesh( geometry, material );

Three js animate blender model with material colors

1 Answers