Javascript Threejs points-将渐变颜色设置为点

我正在使用threejs创建和渲染点云。我想做的是根据每个点的Z坐标给它一个特定的颜色。该颜色应该从一些颜色映射，例如具有最小Z坐标的绿色，以及具有最大Z值的蓝色、黄色和红色。按照这种渐变方法，给每个点指定特定颜色的最简单方法是什么

我的脚本相当长，因此我将其简化为以下几行代码：

function drawCloud(){
    for(i = 0; i < totalPoints * 3; i = i + 3){
        //Setting the new Z value of each point
        //Each third value is the Z value, therefore using i+2
        points.geometry.attributes.position.array[i+2] = theNewZValueForThisPoint;

        //Now setting the color of each point
        // i, i+1 AND i+2 is the R,G, B value of each point
        //here each point is set to a green color
        points.geometry.attributes.color.array[i] = 0;
        points.geometry.attributes.color.array[i+1] = 1;
        points.geometry.attributes.color.array[i+2] = 0;
    }    
}

function animate() {
    requestAnimationFrame( animate );
    drawCloud();
    render();
  }
  
  function render() {
    renderer.render( scene, camera );
  }

函数drawCloud（）{
对于（i=0；i

我已经创建了一种分割方法，其中每个点在一个范围内获得一个固定的颜色。大概是这样的：

function getColor() {
    if(ZValue > 0 && ZValue < 100){
        color = green;
    }
    if(ZValue > 100 && ZValue < 200){
        color = blue;
    }
}

函数getColor（）{ 如果（ZValue>0&&ZValue<100）{ 颜色=绿色； } 如果（ZValue>100&&ZValue<200）{ 颜色=蓝色； } } 这不是我想要的，因为有一个区域的颜色会发生剧烈的变化。我希望它有一个更梯度的方法，随着Z值的增加而缓慢变化

---

请记住，此代码已在很大程度上进行了简化，以保持其简单性，并仅显示基本思想。任何关于其他改进的建议都将不胜感激。

鉴于您拥有点云的最小z值和最大z值，您可以使用此函数获取每个点的颜色。您可以相应地在渐变数组中自定义渐变的颜色和断点：

function getColor(z, zMin, zMax) {
  
  // normalize v in the range of vMin and vMax
  function normalize(v, vMin, vMax) {
    return ((v - vMin) / (vMax - vMin));
  }

  // clamp a value between min and max inclusive
  function clamp(value, min, max) {
    if (value >= max) return max;
    if (value <= min) return min;
    return value;
  }

  // calculates the linear interpolation of two numbers
  function lerp(a, b, alpha) {
    return a + (b - a) * clamp(alpha, 0, 1);
  }
  
  const zNorm = normalize(z, zMin, zMax);

  // gradient definition. Each element defines a breakpoint within the normalized z-range (0 - 1) and color
  // important: has to be sorted ascendingly by bp
  const gradient = [
    {bp: 0,   r: 0, g: 1, b: 0},
    {bp: 1/3, r: 0, g: 0, b: 1},
    {bp: 2/3, r: 1, g: 1, b: 0},
    {bp: 1,   r: 1, g: 0, b: 0}
  ];

  let red, green, blue;

  // find the color segment (between breakpoints), interpolate the color between breakpoints
  for(let i = 0, g = gradient.length; i < g; i++) {
    if(zNorm < gradient[i].bp || gradient[i].bp === 1) {
      red = lerp(gradient[i-1].r, gradient[i].r, normalize(zNorm, gradient[i-1].bp, gradient[i].bp));
      green = lerp(gradient[i-1].g, gradient[i].g, normalize(zNorm, gradient[i-1].bp, gradient[i].bp));
      blue = lerp(gradient[i-1].b, gradient[i].b, normalize(zNorm, gradient[i-1].bp, gradient[i].bp));
      break;
    }
  }
  
  return {r: red, g: green, b: blue};
}

函数getColor（z，zMin，zMax）{ //在vMin和vMax范围内规范化v 函数规格化（v、vMin、vMax）{ 返回（（v-vMin）/（vMax-vMin））； } //将值钳制在最小值和最大值之间（包括最小值和最大值） 功能钳位（值、最小值、最大值）{ 如果（值>=max）返回max；

---

如果（值给定点云的最小z值和最大z值，则可以使用此函数获取每个点的颜色。您可以相应地在渐变数组中自定义渐变的颜色和断点：

function getColor(z, zMin, zMax) {
  
  // normalize v in the range of vMin and vMax
  function normalize(v, vMin, vMax) {
    return ((v - vMin) / (vMax - vMin));
  }

  // clamp a value between min and max inclusive
  function clamp(value, min, max) {
    if (value >= max) return max;
    if (value <= min) return min;
    return value;
  }

  // calculates the linear interpolation of two numbers
  function lerp(a, b, alpha) {
    return a + (b - a) * clamp(alpha, 0, 1);
  }
  
  const zNorm = normalize(z, zMin, zMax);

  // gradient definition. Each element defines a breakpoint within the normalized z-range (0 - 1) and color
  // important: has to be sorted ascendingly by bp
  const gradient = [
    {bp: 0,   r: 0, g: 1, b: 0},
    {bp: 1/3, r: 0, g: 0, b: 1},
    {bp: 2/3, r: 1, g: 1, b: 0},
    {bp: 1,   r: 1, g: 0, b: 0}
  ];

  let red, green, blue;

  // find the color segment (between breakpoints), interpolate the color between breakpoints
  for(let i = 0, g = gradient.length; i < g; i++) {
    if(zNorm < gradient[i].bp || gradient[i].bp === 1) {
      red = lerp(gradient[i-1].r, gradient[i].r, normalize(zNorm, gradient[i-1].bp, gradient[i].bp));
      green = lerp(gradient[i-1].g, gradient[i].g, normalize(zNorm, gradient[i-1].bp, gradient[i].bp));
      blue = lerp(gradient[i-1].b, gradient[i].b, normalize(zNorm, gradient[i-1].bp, gradient[i].bp));
      break;
    }
  }
  
  return {r: red, g: green, b: blue};
}

函数getColor（z，zMin，zMax）{ //在vMin和vMax范围内规范化v 函数规格化（v、vMin、vMax）{ 返回（（v-vMin）/（vMax-vMin））； } //将值钳制在最小值和最大值之间（包括最小值和最大值） 功能钳位（值、最小值、最大值）{ 如果（值>=max）返回max；

---

if（value）谢谢。这是一个很好的解决方案。唯一的缺点是执行时间相对较高。除此之外，它很好。谢谢！如果你想加快它的速度，你实际上可以完全省略钳制函数。lerp函数将如下所示：

返回a+（b-a）*alpha

。规范化已经将zNorm保持在0和1之间。谢谢。这是一个很好的解决方案。唯一的缺点是执行时间相对较长。除此之外，它很好。谢谢！如果您想加快一点速度，实际上可以完全省略钳制函数。lerp函数将如下所示：

return a+（b-a）*alpha

。标准化已将zNorm保持在0和1之间。