Cannot update BufferGeometry color buffer when morphing surface

Questions
1

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;

2

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

3

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.

4

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');

});