Cannot update BufferGeometry color buffer when morphing surface

For a dynamic surface rendering utilizing morphTargets, I need to update the color buffer
each time the morphTargetInfluences gets updated. The color scale uses a d3 color scale,
which returns a color based on the z value of a point in the position buffer. Using the below
code produces no color change. Any insight is much appreciated.

// Use d3 for color scale
var d3color = d3.scaleLinear()
.domain([0, 40])
.interpolate(function () { return d3.interpolateSpectral; });

// update the color buffer
var positionAttribute = geometry.attributes.position; // the points
var newcolors = [];
var color = new THREE.Color();
for (var i = 0, j = 2; i < positionAttribute.count; i++ , j += 3) {
color.set(new THREE.Color(d3color(positions[j] + parseFloat(val)))); // z value + small increment - val - from a slider control
newcolors.push(color.r, color.g, color.b);
}
geometry.setAttribute(‘color’, new THREE.Float32BufferAttribute(newcolors, 3));
geometry.attributes.color.needsUpdate = true;

Don’t do that. Only set an attribute if it has not existed before. Otherwise update the existing attribute.

Thanks very much for the reply. Should I be updating the original color array, item by item, and then call the .update()? Appreciate your help.

This is latest attempt to update the color buffer array directly, still not working. Thanks for looking…

$(’#morphSlider’).on(‘mouseup’, function () {

            var val = parseFloat($('#morphSlider').val());  // tsmall increment from slider control
			               
            var color = new THREE.Color();
            for (var i = 0, j = 2; i < geometry.attributes.color.array.length; i += 3, j += 3) {
                color.set(new THREE.Color(d3color(positions[j] + parseFloat(val))));
                geometry.attributes.color.array[i] = color.r;
                geometry.attributes.color.array[i + 1] = color.g;
                geometry.attributes.color.array[i + 2] = color.b;
                //console.log(positions[j],parseFloat(val),positions[j] + parseFloat(val));
            }
            geometry.attributes.color.updateRange.offset = 0; // where to start updating
            geometry.attributes.color.updateRange.count = 14000; // how many vertices to update
            geometry.attributes.color.needsUpdate = true;
            //console.log('update');

});