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.
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);
}
