采用THree.js为三角网格的每一个面填充颜色

2016.9.21  20:57

今天在工作中需要构建一个3D的三角网格，构建网格的三角形数目是17140个，且网格中每个三角形的面的颜色需要可以定制。在参考了zemo_wang大牛讲解的关于材料的博文（http://blog.csdn.net/birdflyto206/article/details/52414245）后，自己仿照这写了两个Demo。

第一个Demo与zemo_wang实例中的代码一样，定义的定制是正方体，也可以出现效果，立方体每个面的颜色可以实现定制；

第二个是我自定义的形状：var geometry = new THREE.Geometry()，其他代码类型

 for (var i = 0 ; i < geometry.vertices.length ; i = i + 3) {
            geometry.faces.push(new THREE.Face3(i, i + 1, i + 2))
            material = new THREE.MeshBasicMaterial({ color: rgb2hex(arrayColor[i])});
            mats.push(material);
        }
        var faceMaterial = new THREE.MeshFaceMaterial(mats);
        var cube = new THREE.Mesh(geometry, faceMaterial);
        secene.add(cube);

结果出现的现象是图形的颜色都是一样的，没有我想要的每个面的颜色不一样。在分析了Mesh（）和geometry.faces.push(new THREE.Face3(i, i + 1, i + 2))的源代码后，我尝试的方法是为每个面指定材料索引：  geometry.faces[a].materialIndex = a;

这样效果就可以出来了。