Question

如代码中所示，通过克隆IcosahedronBufferGeometry的顶点可以创建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);
  }
}

这能解决您的问题吗？

从Three.js中Vector的z坐标派生的顶点颜色

1 个答案: