Three.js - plano material múltiple

Question

Estoy tratando de tener materiales múltiples en un solo plano para hacer un editor de terreno simple. Así que creo un par de materiales, y tratar de asignar un índice matetrial a cada vértice en mi avión:

var materials = []; 
materials.push(new THREE.MeshFaceMaterial({ color: 0xff0000 })); 
materials.push(new THREE.MeshFaceMaterial({ color: 0x00ff00 })); 
materials.push(new THREE.MeshFaceMaterial({ color: 0x0000ff })); 
// Plane 
var planegeo = new THREE.PlaneGeometry(500, 500, 10, 10); 
planegeo.materials = materials; 
for(var i = 0; i < planegeo.faces.length; i++) 
{ 
    planegeo.faces[i].materialIndex = (i%3); 
} 

planegeo.dynamic = true; 
this.plane = THREE.SceneUtils.createMultiMaterialObject(planegeo, materials); 

Pero siempre consigo, ya sea un montón de errores en el shader, o sólo un único todo-roja avión si uso MeshBasicMaterial en lugar de FaceMaterial. Cualquier ayuda es genial gracias!

Answer 1

Para obtener un tablero de ajedrez con tres colores ello:

// geometry 
var geometry = new THREE.PlaneGeometry(500, 500, 10, 10); 

// materials 
var materials = []; 
materials.push(new THREE.MeshBasicMaterial({ color: 0xff0000 })); 
materials.push(new THREE.MeshBasicMaterial({ color: 0x00ff00 })); 
materials.push(new THREE.MeshBasicMaterial({ color: 0x0000ff })); 

// assign a material to each face (each face is 2 triangles) 
var l = geometry.faces.length/2; 
for(var i = 0; i < l; i ++) { 
    var j = 2 * i; 
    geometry.faces[ j ].materialIndex = i % 3; 
    geometry.faces[ j + 1 ].materialIndex = i % 3; 
} 

// mesh 
mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials)); 
scene.add(mesh); 

EDIT: Actualización para three.js R.60