Three.js - multiplo piano di materiale

Question

Sto provando ad avere materiali multipli su un singolo piano per creare un semplice editor di terreno. Così ho creato un paio di materiali, e cerco di assegnare un indice di matetrial ad ogni vertice nel mio aereo:

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); 

Ma ho sempre ottenere sia un sacco di errori nello shader, o solo un singolo tutta rossa piano se uso MeshBasicMaterial invece di FaceMaterial. Qualsiasi aiuto è fantastico!

Answer 1

Per ottenere uno schema a scacchiera con tre colori fare questo:

// 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: Aggiornamento per Three.js r.60