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

Question

我正在尝试在 Three.js 中渲染点矩阵，但我需要将云中的每个粒子视为一个单独的 "pixel"，为此我可以更改每个粒子的颜色飞。我想出了如何基本渲染点云，并且可以设置初始颜色，但是无法弄清楚如何在设置后更改每个点的颜色。

我正在这样生成点云：

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/

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

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/.点击你会看到一个点的颜色变化。

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

Dynamically change point color in Three.js PointClouod

point-clouds

three.js