在 Three.js PointClouod 中动态改变点颜色

Question

我正在尝试在 Three.js 中渲染一个点矩阵，但我需要将云中的每个粒子视为一个单独的“像素”，我可以动态更改每个粒子的颜色。我想出了如何基本渲染点云，并且可以设置初始颜色，但不知道如何在设置后更改每个点的颜色。

我正在生成这样的点云：

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;

            }

我的基本代码在这里：http://jsfiddle.net/dg34sbsk/

知道如何分别动态地更改每个点的颜色吗？ （颜色数据将来自网络服务）。

Answer 1

您可以直接更改其值pointclouds[0].geometry.colors=...，然后再更改pointclouds[0].geometry.colorsNeedUpdate=true。 要设置每个点的颜色，只需设置 colors 的子值，例如 pointclouds[0].geometry.colors[22]=new THREE.Color("rgb(255,0,0)");。

看到这个：http://jsfiddle.net/aboutqx/dg34sbsk/2/ .click 你会看到一个点的颜色发生了变化。