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/

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

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/ .click，您会看到一个点的颜色发生变化。

在Three.js PointClouod

1 个答案: