For each point, I have both position coordinates and color values represented as (r, g, b). My goal is to assign a unique color to each individual point. Here is the approach I took:
const vertices = new Float32Array(data.points);
const colors = new Float32Array(data.colors)
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
geometry.setAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
const material = new THREE.PointsMaterial({color: colors});
const pointCloud = new THREE.Points( geometry, material)
this.scene.clear();
this.scene.add( pointCloud );
this.renderer.render(this.scene, this.camera);
However, when using this method, all my points appear white. So, I attempted an alternative solution:
const material = new THREE.PointsMaterial( { vertexColors: true } );
But, unfortunately, it resulted in the following error message:
[.WebGL-0x2e2bb1a84c00]GL ERROR :GL_INVALID_OPERATION : glDrawArrays: attempt to access out of range vertices in attribute 1