Three.js - samolot z wieloma materiałami

Question

Próbuję mieć wiele materiałów na jednej płaszczyźnie, aby utworzyć prosty edytor terenu. Więc tworzę kilka materiałów i spróbować przypisać matetrial indeks do każdego wierzchołka w moim samolocie:

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

Ale zawsze uzyskać albo całą masę błędów w cieniującego, lub tylko jeden all-czerwony samolot, jeśli używam MeshBasicMaterial zamiast FaceMaterial. Każda pomoc jest świetna!

Answer 1

Aby otrzymać wzór szachownicy z trzech kolorów zrobić:

// 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: Aktualizacja dla three.js r.60