使用Three.js（r78），如何沿路径转换两个值之间的线材颜色？

Question

我以为我理解了这个example，但我尝试将其应用到我的代码中会产生纯黑色线条。有人可以帮我理解为什么这可能不起作用吗？

function(ptArray) {
  var geometry = new THREE.BufferGeometry(),
      material = new THREE.LineBasicMaterial({
        color: 0xffffff,
        linewidth: 4,
        vertexColors: THREE.VertexColors
      }),
      linePositions = new Float32Array(pts),
      lineColors = new Float32Array(pts),
      visible = new Float32Array(pts / 3);

  visible.fill(1.0);

  for (var p = 0; p < pts; p ++) {
    linePositions[p] = ptArray[p];
    lineColors[p] = new THREE.Color(0xffffff).setHSL(p/pts, 1.0, 0.5);
  }

  geometry.addAttribute('position', new THREE.BufferAttribute(linePositions, 3));
  geometry.addAttribute('vertColor', new THREE.BufferAttribute(lineColors, 3));
  geometry.addAttribute('visible', new THREE.BufferAttribute(visible, 1));

  scene.add(new THREE.LineSegments(geometry, material);
}