THREE.js 使用 lerpColors 制作渐变

Question

我一直在试图找出一些.lerpColors()的东西——特别是如果可以在不止 2 个 colors 之间转换。

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

无论哪种方式，我想知道的是是否有可能从蓝色过渡到白色再到红色。 甚至在 4 个 colors 之间进行转换 - 而不是只有两个 colors，就像我现在拥有的那样。

这是我的代码：

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

   var cubeGeometry = new THREE.BoxBufferGeometry(10, 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, 0);

}