i'm trying render matrix of points in three.js need treat each particle in cloud individual "pixel" can change color of each on fly. figured out how render point cloud, , can set initial color, cannot figure out how change color of each point once it's set.
i'm generating point cloud this:
function generateregularpointcloud( color, width, length ) { var geometry = new three.geometry(); var numpoints = width * length; var colors = []; var k = 0; for( var = 0; < width; i++ ) { for( var j = 0; j < length; j++ ) { var u = / 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 here: http://jsfiddle.net/dg34sbsk/
any idea how change each point color separately , dynamically? (data colors coming in web service).
you can directly change its's value pointclouds[0].geometry.colors=...
, after pointclouds[0].geometry.colorsneedupdate=true
. set each point's color set colors's children's value pointclouds[0].geometry.colors[22]=new three.color("rgb(255,0,0)");
.
see this:http://jsfiddle.net/aboutqx/dg34sbsk/2/ .click , see color of 1 point changes.