three.js - 在 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。 要设置每个点的颜色，只需设置颜色的子值，例如pointclouds[0].geometry.colors[22]=new THREE.Color("rgb(255,0,0) ”)；。

看到这个:http://jsfiddle.net/aboutqx/dg34sbsk/2/ .单击，您将看到一个点的颜色发生变化。