THREE.js 使用 lerpColors 制作渐变

如何解决THREE.js 使用 lerpColors 制作渐变

我一直在尝试解决 .lerpColors() 的一些问题 - 特别是如果可以在超过 2 种颜色之间转换。

我很快组装了一个小应用程序 - 代码如下，它 100% 工作，在白色和蓝色之间创建了一个很好的平滑过渡。
我也把这个完全相同的代码放在一个小提琴中 - 但由于某种原因它不在那里工作，即使它是相同的代码：https://jsfiddle.net/gilomer88/6cw8az72/16/

不管怎样，我想知道是否可以从蓝色过渡到白色再到红色。或者甚至在 4 种颜色之间过渡 - 而不是只有两种颜色，就像我现在拥有的那样。

这是我的代码：

function makeCube() {
  
   var cubeMaterial = new THREE.MeshPhongMaterial({ 
        flatShading: false,shininess: 80,vertexColors: true
      });

   var cubeGeometry = new THREE.BoxBufferGeometry(10,10,30,30);
   var cubeVertexPositionsArray = cubeGeometry.attributes.position;
   console.log("cubeVertexPositionsArray.count = ",cubeVertexPositionsArray.count);
                
   const vertex = new THREE.Vector3();

   cubeGeometry = cubeGeometry.toNonIndexed(); 

   // "BoundingBox" business:
   cubeGeometry.computeBoundingBox();
   const aabb = cubeGeometry.boundingBox;
   const f = aabb.max.z - aabb.min.z;
                
   cubeVertexPositionsArray = cubeGeometry.attributes.position;

   let c1 = new THREE.Color("white");
   let c2 = new THREE.Color("red");
  
   // Make the Colors Array:
   var cubeColorsArray = [];
   let finalColor = new THREE.Color();


   for(let i = 0; i < cubeVertexPositionsArray.count; i++) {
      vertex.fromBufferAttribute( cubeVertexPositionsArray,i );
      let alphaValue = ( vertex.z - aabb.min.z) / f ;
      finalColor.lerpColors( c1,c2,alphaValue );
      /* finalColor = whiteColor.lerpHSL( redColor,alphaValue ) */;
      // cubeMaterial.color.copy(whiteColor).lerpHSL(redColor,alphaValue);
      cubeColorsArray.push(finalColor.r,finalColor.g,finalColor.b);  
   }

   cubeGeometry.setAttribute("color",new THREE.Float32BufferAttribute(cubeColorsArray,3));     
   cubeMaterial.vertexColors = true;
   cubeMaterial.flatShading = false;

   let cubeMesh = new THREE.Mesh(cubeGeometry,cubeMaterial);
  
   scene.add(cubeMesh);
   cubeMesh.position.set(0,0);

}