Dynamically change point color in Three.js PointClouod
I am trying to display a matrix of points in Three.js, but I need to treat each particle in the cloud as a separate "pixel" for which I can change the color of each on the fly. I figured out how to basically render a point cloud, and can set an initial color, but can't figure out how to change the color of each point after setting it.
I am creating a point cloud like this:
function generateRegularPointcloud( color, width, length ) {
var geometry = new THREE.Geometry();
var numPoints = width * length;
var colors = [];
var k = 0;
for( var i = 0; i < width; i++ ) {
for( var j = 0; j < length; j++ ) {
var u = i / width;
var v = j / length;
var x = u - 0.5;
var y = 0;
var z = v - 0.5;
var v = new THREE.Vector3( x,y,z );
var intensity = ( y + 0.1 ) * 7;
colors[ 3 * k ] = color.r * intensity;
colors[ 3 * k + 1 ] = color.g * intensity;
colors[ 3 * k + 2 ] = color.b * intensity;
geometry.vertices.push( v );
colors[ k ] = ( color.clone().multiplyScalar( intensity ) );
k++;
}
}
geometry.colors = colors;
geometry.computeBoundingBox();
var material = new THREE.PointCloudMaterial( { size: pointSize, vertexColors: THREE.VertexColors } );
var pointcloud = new THREE.PointCloud( geometry, material );
return pointcloud;
}
My basic code is here: http://jsfiddle.net/dg34sbsk/
Any idea how to change each point color separately and dynamically? (The data for the colors will come from a web service.)
source to share
You can directly change its value pointclouds[0].geometry.colors=...
after that pointclouds[0].geometry.colorsNeedUpdate=true
. To set each point color, just set the color values that are children like pointclouds[0].geometry.colors[22]=new THREE.Color("rgb(255,0,0)");
.
see this: http://jsfiddle.net/aboutqx/dg34sbsk/2/ .click and you will see the color of one point change.
source to share