javascript - 三人组 : Can I change a face color in PlaneGeometry based on vertex value?

Question

有没有一种方法可以以编程方式更改面的颜色，而不是预先创建 Material 托盘，然后根据顶点值进行分配？我有这个:

var materials = [];
materials.push([..] //add all the materials here.

var geometry = new THREE.PlaneGeometry(gs, gs, size, size);
$.getJSON('http://localhost:5000', function (data) {
    for (var i = 0, l = geometry.vertices.length; i < l; i++) {
        geometry.vertices[i].z = data.map[i] / 255;
        if (geometry.vertices[i].z > 1) {
            geometry.faces[i].materialIndex = 1;
        } else {
            geometry.faces[i].materialIndex = 0;
        }
    }
    var plane = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
    scene.add(plane);
});

想要类似的东西:

[..]
    $.getJSON('http://localhost:5000', function (data) {
        for (var i = 0, l = geometry.vertices.length; i < l; i++) {
            geometry.vertices[i].z = data.map[i] / 255;
            if (geometry.vertices[i].z > 1) {
                geometry.faces[i].setrgb(i*128, i*2, i*96);
            } else {
                geometry.faces[i].setrgb(i*12, i*2, i*96);
            }
        }
[..]

谢谢!

Answer 1

举个例子

var size = 10; // just for example
...
planeGeom = new THREE.PlaneGeometry(size, size, 10, 10);
...
planeGeom.faces.forEach(function(face){
  var val = planeGeom.vertices[face.a].y;
  face.color.setRGB(Math.abs(val) / size * 2, 0, 0);
});
planeGeom.colorsNeedUpdate = true;

如果要使用r、g、b组件设置颜色，则组件的值必须是从0到1，而不是从 0 到 255。每个面都是 Face3 type，具有属性 a、b、c，其中存储顶点索引。

jsfiddle