# Coloring every point in Points with a different color

**URL:** <https://discourse.threejs.org/t/coloring-every-point-in-points-with-a-different-color/1545>\
**Category:** Questions\
**Tags:** points-material\
**Created:** [December 30, 2017, 12:36pm UTC](https://discourse.threejs.org/t/coloring-every-point-in-points-with-a-different-color/1545 "2017-12-30T12:36:07Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![cyth319](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/cyth319/32/813_2.png) [@cyth319](https://discourse.threejs.org/u/cyth319)\
**Post date:** [December 30, 2017, 12:36pm UTC](https://discourse.threejs.org/t/coloring-every-point-in-points-with-a-different-color/1545/1 "2017-12-30T12:36:07Z")

</div>

its what title says, is there a way to do that?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [December 30, 2017, 3:36pm UTC](https://discourse.threejs.org/t/coloring-every-point-in-points-with-a-different-color/1545/2 "2017-12-30T15:36:03Z")

</div>

You can use vertex coloring for this. Please have a look at the code of the following example:

[https://threejs.org/examples/#webgl\_buffergeometry\_points](https://threejs.org/examples/#webgl_buffergeometry_points)

---

<div class="post-metadata">

**Author:** ![cyth319](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/cyth319/32/813_2.png) [@cyth319](https://discourse.threejs.org/u/cyth319)\
**Post date:** [December 30, 2017, 5:37pm UTC](https://discourse.threejs.org/t/coloring-every-point-in-points-with-a-different-color/1545/3 "2017-12-30T17:37:50Z")

</div>

hi mugen. i am a beginner when it comes to programming and i want to use Geometry instead of buffergeometry. can you tell me on this example please.

```
var pointGeometry = new THREE.Geometry();
pointGeometry.vertices.push( new THREE.Vector3( 0, 1, 0), new THREE.Vector3( 0, 2, 0), new THREE.Vector3( 0, 3, 0) );
			
var pointMaterial = new THREE.PointsMaterial( { color: 0x888888 , size: 0.15 } ); ///what to do here

pointOnGeo = new THREE.Points( pointGeometry, pointMaterial );
```

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [December 30, 2017, 6:44pm UTC](https://discourse.threejs.org/t/coloring-every-point-in-points-with-a-different-color/1545/4 "2017-12-30T18:44:49Z")

</div>

Hope, this one helps 😉

[https://jsfiddle.net/f2Lommf5/615/](https://jsfiddle.net/f2Lommf5/615/)

BTW: Read the docs to learn more about `Geometry`: [three.js docs](https://threejs.org/docs/#api/core/Geometry)