javascript - 顶点颜色源自 Three.js 中 Vector 的 z 坐标

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

这解决了您的问题吗？