CODEWITHSUNDEEP
three.jspoint-clouds
Adam Haile
Adam Haile

Reputation: 31329

Dynamically change point color in Three.js PointClouod

I'm trying to render a matrix of points in Three.js but I need to treat each particle in the cloud as an individual "pixel" for which I can change the color of each on the fly. I figured out how to basically render the point cloud, and can set the initial color, but cannot figure out how to change the color of each point once it's set.

I'm generating the 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? (Data for the colors will be coming in from a web service).

Upvotes: 4

Views: 5652

Answers (1)

aboutqx
aboutqx

Reputation: 446

You can directly change its's value pointclouds[0].geometry.colors=... and after that pointclouds[0].geometry.colorsNeedUpdate=true. To set each point's color just set the colors's children's value 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 changes.

Upvotes: 4

Related Questions