Points are not shown with colors in bufferGeometry

using Float32Array array of points and Uint8Array array of color .
I created “Points”. and added to the scene.
but all points are white colored.
In console, color attributes has Uint8Array.

function pointCloudfromBuffer(point,colors) {

    var geom = new THREE.BufferGeometry();
    geom.setAttribute('position', new THREE.BufferAttribute(point, 3));
    geom.setAttribute( 'color', new THREE.BufferAttribute( colors, 4 ) );
    geom.computeBoundingBox()
    
    var geoboundingBox = geom.boundingBox
    var centerP = new THREE.Vector3()
    centerP.addVectors(geoboundingBox.max, geoboundingBox.min)
    centerP.divideScalar(2)

    var cloud = new THREE.Points(geom, new THREE.PointsMaterial({  size: .1, vertexColors: true }));

    // get poind cloud to origin
    cloud.position.set(cloud.position.x - centerP.x, cloud.position.y - centerP.y, cloud.position.z - centerP.z)
    console.log(cloud);

    scene.add(cloud);
}

Make sure that the actual values in the array are integers in the range [0, 255]. Float values are invalid. Besides, vertex color values can only have color 3 components (RGB). RGBA values are not supported.

all values are in range [ 0,255]

but still get only one color to all points.

Try to set this attribute like this:
geom.setAttribute( 'color', new THREE.BufferAttribute( colors, 3, true ) );

geom.setAttribute( ‘color’, new THREE.BufferAttribute( colors, 4, true ) );

I got below result.


actual result is
image

Just out of curiousity: why do you have 4 for itemSize in that color attribute?

I have Float32Array with elements 188277.
so from that I got 62759(188277/3) points.

now I have Uint8Array with elements 250936(62759 * 4).
I think this array contains RGBA values.
please refer below image
image

by below code I got result.
but for that I have to create array and assign value of typearray to that array.
that will take too much memory and time to process.

function pointCloudfromBuffer(point, colors) {

    var geom = new THREE.BufferGeometry();

    geom.setAttribute('position', new THREE.BufferAttribute(point, 3));

    var col = []

    for (var i = 0; i < colors.length; i++) {

            if(i%4 == 3){

                continue;

            }

            col.push(1-(colors[i]/255))

        }

    console.log(col.length);

    geom.setAttribute('color', new THREE.Float32BufferAttribute(col, 3));

    geom.computeBoundingBox()

    var geoboundingBox = geom.boundingBox

    var centerP = new THREE.Vector3()

    centerP.addVectors(geoboundingBox.max, geoboundingBox.min)

    centerP.divideScalar(2)

    var cloud = new THREE.Points(geom, new THREE.PointsMaterial({ size: 1, vertexColors: true }));

    // get poind cloud to origin

    cloud.position.set(cloud.position.x - centerP.x, cloud.position.y - centerP.y, cloud.position.z - centerP.z)

    console.log(cloud);

    scene.add(cloud);

}

with this,

geom.setAttribute( 'color', new THREE.BufferAttribute( colors, 3, true ) );

I got below result.

Looks trippy, but I like it somehow :slight_smile:

Is colors still an attribute of 4-components per item?

no 3 component per item

Have you seen this code?

Would be great to provide an editable live code example :slight_smile:

I don’t know how to provide my code.
this is first time I upload my project .
I hope I have done correctly.

That’s what I see, running your project:

Seems okay.

1 Like