# All points in point cloud have same color

**URL:** https://discourse.threejs.org/t/all-points-in-point-cloud-have-same-color/69381
**Category:** Questions
**Created:** [August 16, 2024, 10:25am UTC](https://discourse.threejs.org/t/all-points-in-point-cloud-have-same-color/69381 "2024-08-16T10:25:55Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![mghildiy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mghildiy/32/50455_2.png) [@mghildiy](https://discourse.threejs.org/u/mghildiy)
#### Post date: [August 16, 2024, 10:25am UTC](https://discourse.threejs.org/t/all-points-in-point-cloud-have-same-color/69381/1 "2024-08-16T10:25:55Z")

</div>

I have following code to render point cloud:

```javascript
var pointsWithColors = <array of objects where each object has x,y,z,r,g,b values>
const flArr = new Float32Array(pointsWithColors.length * 3);
var colors = new Float32Array(pointsWithColors.length * 3);
var sizes = new Float32Array(pointsWithColors.length);
var alphas = new Float32Array(pointsWithColors.length);
for (var i = 0; i < pointsWithColors.length; i++) {
	  flArr[i * 3 + 0] = pointsWithColors[i].x;
	 flArr[i * 3 + 1] = pointsWithColors[i].y;
	 flArr[i * 3 + 2] = pointsWithColors[i].z;
	 colors[i * 3 + 0] = pointsWithColors[i].red;
	 colors[i * 3 + 1] = pointsWithColors[i].green;
	 colors[i * 3 + 2] = pointsWithColors[i].blue;
	 sizes[i] = 0.1;
	 alphas[i] = 1;
   }
scene = new THREE.Scene();
geometry = new THREE.BufferGeometry();
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
geometry.setAttribute( 'position', new THREE.BufferAttribute( flArr, 3 ) );
geometry.setAttribute( 'color', new THREE.BufferAttribute( colors, 3, true ) );
geometry.setAttribute( 'size', new THREE.BufferAttribute( sizes, 1 ) );
geometry.setAttribute( 'alpha', new THREE.BufferAttribute( alphas, 1 ) );
var pointCloud = new THREE.Points( geometry);

```

Points are rendered, but all points have same color.

What am I missing here?

---

<div class="post-metadata">

### Author: ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)
#### Post date: [August 16, 2024, 12:29pm UTC](https://discourse.threejs.org/t/all-points-in-point-cloud-have-same-color/69381/2 "2024-08-16T12:29:36Z")

</div>

> [@mghildiy](#):
>
> `var pointCloud = new THREE.Points( geometry);`

This line needs to be something like this:  
`var pointCloud = new THREE.Points( geometry, new THREE.PointsMaterial( { vertexColors: true } ) );`  
🤔

---

<div class="post-metadata">

### Author: ![mghildiy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mghildiy/32/50455_2.png) [@mghildiy](https://discourse.threejs.org/u/mghildiy)
#### Post date: [August 16, 2024, 12:32pm UTC](https://discourse.threejs.org/t/all-points-in-point-cloud-have-same-color/69381/3 "2024-08-16T12:32:09Z")

</div>

I tried this too, but no change.

---

<div class="post-metadata">

### Author: ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)
#### Post date: [August 16, 2024, 12:39pm UTC](https://discourse.threejs.org/t/all-points-in-point-cloud-have-same-color/69381/4 "2024-08-16T12:39:17Z")

</div>

Any chance to provide a minimal working live code example, that demonstrates the issue?

---

<div class="post-metadata">

### Author: ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)
#### Post date: [August 16, 2024, 9:03pm UTC](https://discourse.threejs.org/t/all-points-in-point-cloud-have-same-color/69381/5 "2024-08-16T21:03:29Z")

</div>

What color are they coming out as?

---

<div class="post-metadata">

### Author: ![GitHubDragonFly](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/githubdragonfly/32/20752_2.png) [@GitHubDragonFly](https://discourse.threejs.org/u/GitHubDragonFly)
#### Post date: [August 16, 2024, 9:52pm UTC](https://discourse.threejs.org/t/all-points-in-point-cloud-have-same-color/69381/6 "2024-08-16T21:52:27Z")

</div>

I might be wrong about any of the following, but here it is:

How are your objects constructed, is it `x,y,z,r,g,b` or is it `x,y,z,red,green,blue` ? Maybe you should show one of the objects.

If you check the [BufferAttribute](https://threejs.org/docs/#api/en/core/BufferAttribute) documentation, it shows the `itemSize` in the constructor so depending on what you are aiming for it could be 3 for `RGB` or 4 for `RGBA`, and since you seem to be creating some custom `alpha` attribute maybe you should just switch to the following:

```js
 colors[i * 4 + 0] = pointsWithColors[i].r; // or .red if marked as such
 colors[i * 4 + 1] = pointsWithColors[i].g; // or .green if marked as such
 colors[i * 4 + 2] = pointsWithColors[i].b; // or .blue if marked as such
 colors[i * 4 + 3] = 1.0; // alpha

 // then add it like this
 geometry.setAttribute( 'color', new THREE.BufferAttribute( colors, 4 ) );

```

You would need to pay attention to the length of the array you are creating.

Also, `size` is the property of the [PointsMaterial](https://threejs.org/docs/#api/en/materials/PointsMaterial) and not really an attribute, so the final construction should be as the @prisoner849 suggested but with the size:

```js
var pointCloud = new THREE.Points( geometry, new THREE.PointsMaterial( { size: 0.1, vertexColors: true } ) );

```

---

<div class="post-metadata">

### Author: ![GitHubDragonFly](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/githubdragonfly/32/20752_2.png) [@GitHubDragonFly](https://discourse.threejs.org/u/GitHubDragonFly)
#### Post date: [August 16, 2024, 9:57pm UTC](https://discourse.threejs.org/t/all-points-in-point-cloud-have-same-color/69381/7 "2024-08-16T21:57:09Z")

</div>

Assuming these are not huge, you can always log to the console all of the arrays, including the original point cloud array, and see what your code puts in each array and compare it to the original.

---

<div class="post-metadata">

### Author: ![mghildiy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mghildiy/32/50455_2.png) [@mghildiy](https://discourse.threejs.org/u/mghildiy)
#### Post date: [August 17, 2024, 2:31am UTC](https://discourse.threejs.org/t/all-points-in-point-cloud-have-same-color/69381/8 "2024-08-17T02:31:05Z")

</div>

Object is as:

> {  
> “x”: 378930,  
> “y”: 2048040,  
> “z”: 552.54,  
> “red”: 139,  
> “green”: 151,  
> “blue”: 148  
> }

---

<div class="post-metadata">

### Author: ![mghildiy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mghildiy/32/50455_2.png) [@mghildiy](https://discourse.threejs.org/u/mghildiy)
#### Post date: [August 17, 2024, 2:37am UTC](https://discourse.threejs.org/t/all-points-in-point-cloud-have-same-color/69381/10 "2024-08-17T02:37:46Z")

</div>

It is always white.

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/4/84518575c4a27b59216ee2afccc6020ffc31b98a.png)

---

<div class="post-metadata">

### Author: ![GitHubDragonFly](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/githubdragonfly/32/20752_2.png) [@GitHubDragonFly](https://discourse.threejs.org/u/GitHubDragonFly)
#### Post date: [August 17, 2024, 3:56am UTC](https://discourse.threejs.org/t/all-points-in-point-cloud-have-same-color/69381/11 "2024-08-17T03:56:42Z")

</div>

Try dividing your color values by 255 since they show as unsigned integers.
