将颜色分配给Three.js中几何体中的顶点

Question

这个问题以前问这里:Threejs:分配不同的颜色,以几何每个顶点,但它是很老,所以提供的解决方案不three.js所的当前版本(不再提供属性工作vertexColors为几何类).

我知道可以设置几何体的每个面的颜色,但是我将球体的顶点设置为不同的距离,并且我希望同时调整每个顶点的颜色,这取决于它与中心的距离.

Answer 1

快速 grep（grep "vertexColors" */*.js .在 Three.js 的 src 目录中尝试）表明您无法设置每个顶点的颜色，而只能在最近版本的 Three.js 中设置每个面的颜色。三角形面可以具有具有 3 种颜色的属性 vertexColors，与面的顶点对齐。

对于每个顶点，您必须弄清楚哪些面使用该顶点，然后在面的 vertexColors 属性上设置颜色。

更新：根据您的用例，您可以迭代面，通过面的索引（a、b、c）获取 3 个顶点，然后计算并设置它们的颜色。这将重新计算相同的颜色几次（在您的情况下，每个顶点大约 8 次），但应该是一种快速而简单的方法来完成您所要求的操作。

function color(v) {
    var c = new THREE.Color();
    c.r = (10 + v.y)/20;
    c.g = (10 + v.y)/10 + Math.sin(v.x/10 * Math.PI) - 0.3;
    c.b = 1 - (10 + v.y)/20;
    return c;
}

for(var i = 0; i < geometry.faces.length; ++i) {
    var face = geometry.faces[i];
    face.vertexColors[0] = color(geometry.vertices[face.a]);
    face.vertexColors[1] = color(geometry.vertices[face.b]);
    face.vertexColors[2] = color(geometry.vertices[face.c]);
}

小提琴： http: //jsfiddle.net/87mcD/5/