Three.js - 多材质平面

Question

我正在尝试在单个平面上使用多个材质来创建一个简单的地形编辑器。因此，我创建了一些材质，并尝试为我的平面上的每个顶点分配一个材质索引：

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

但是如果我使用MeshBasicMaterial而不是FaceMaterial，要么在着色器中出现许多错误，要么只有一个全红平面。我做错了什么？

- David Menard

---

这个问题与https://dev59.com/T2oy5IYBdhLWcg3wBJkx大致相同。 - Gero3

是的，我看到了那个，但它是three.js的旧版本，似乎不起作用 :( - David Menard

Answer 1

要获得一种带有三种颜色的棋盘格纹样，请按如下方式操作：

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

编辑：已更新至three.js r.60

- WestLangley