顶点颜色派生自矢量的 z 坐标.js

Question

此处示例：http://jsfiddle.net/c3shonu7/1/

如代码中所示，BufferGeometry对象是通过克隆二十面体BufferGeometry的顶点来创建的。其目的是使细分的二十面体在两极颜色较浅，在赤道颜色较深，即顶点颜色的亮度值基于垂直面的z坐标从1变为0。

color.setHSL(0.1, 0.3, Math.abs(vertices[i + 2]) / geometry.parameters.radius);

然而，每一张脸最终都是"随机"着色的，我错过了什么？

Answer 1

如果我正确理解你的意图，唯一的问题是你要为每个顶点添加三次颜色：

for(var i = 0; i < vertices.length; i+= 1) {
if(i % 3 == 0) {
color.setHSL(0.1, 0.3, Math.abs(vertices[i + 2]) / geometry.parameters.radius);
}
colors.push(color.r,color.g,color.b);
}

由于for循环不是通过顶点迭代，而是通过顶点坐标迭代，因此只有当if语句为true时，才应推送颜色。简而言之：

for(var i = 0; i < vertices.length; i+= 1) {
if(i % 3 == 0) {
color.setHSL(0.1, 0.3, Math.abs(vertices[i + 2]) / geometry.parameters.radius);
colors.push(color.r,color.g,color.b);
}
}

这解决了你的问题吗？