# How to get different colored lines?

**URL:** <https://discourse.threejs.org/t/how-to-get-different-colored-lines/10891>\
**Category:** Questions\
**Tags:** materials, lines\
**Created:** [November 17, 2019, 4:16pm UTC](https://discourse.threejs.org/t/how-to-get-different-colored-lines/10891 "2019-11-17T16:16:12Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Thiru](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Thiru](https://discourse.threejs.org/u/Thiru)\
**Post date:** [November 17, 2019, 4:16pm UTC](https://discourse.threejs.org/t/how-to-get-different-colored-lines/10891/1 "2019-11-17T16:16:12Z")

</div>

Hi

In the following code I expected the first three line segments to be white and last line segment to be red. But I am getting all lines in red.

Pls help me to fix it.  
Thank you

```auto
var material = new THREE.LineBasicMaterial( { color: 0xffffff } );
path.lineTo( 0, 0.8 );
path.quadraticCurveTo( 0, 1, 0.2, 1 );
path.lineTo( 1, 1 );
				
var material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
path.lineTo( 2, 2 );

var points = path.getPoints();

var geometry = new THREE.BufferGeometry().setFromPoints( points );
var material = new THREE.LineBasicMaterial( { color: 0xffffff } );

```

---

<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:** [November 17, 2019, 4:37pm UTC](https://discourse.threejs.org/t/how-to-get-different-colored-lines/10891/2 "2019-11-17T16:37:46Z")

</div>

Would be better if you provide a live code examples (jsfiddle, codepen etc), showing a problem.

---

<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:** [November 17, 2019, 5:47pm UTC](https://discourse.threejs.org/t/how-to-get-different-colored-lines/10891/3 "2019-11-17T17:47:49Z")

</div>

You can only use multiple materials when [groups](https://threejs.org/docs/index.html#api/en/core/BufferGeometry.groups) data are defined in your instance of `BufferGeometry`. If you create a geometry from an array of points (via `.setFromPoints()`), it’s not possible to derive these data.

However, you can still generate the respective group data manually via [BufferGeometry.addGroup()](https://threejs.org/docs/index.html#api/en/core/BufferGeometry.addGroup).

---

<div class="post-metadata">

**Author:** ![Thiru](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Thiru](https://discourse.threejs.org/u/Thiru)\
**Post date:** [November 18, 2019, 1:50pm UTC](https://discourse.threejs.org/t/how-to-get-different-colored-lines/10891/4 "2019-11-18T13:50:57Z")

</div>

Thank you Michael.  
I think it is a bit strange way of doing it in three.js If we want to draw different colour lines on a paper what do we do. We just pick up the colour pen and draw. This is what we do in other computer graphics applications as well. Of course they cant do what three.js does.

---

<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:** [November 18, 2019, 1:54pm UTC](https://discourse.threejs.org/t/how-to-get-different-colored-lines/10891/5 "2019-11-18T13:54:50Z")

</div>

Use `THREE.LineSegments()` with a buffer geometry, build of pairs of vertices, having the same color values, and `THREE.LineBasicMaterial()` with `vertexColors: THREE.VertexColors` property.

---

<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:** [November 18, 2019, 5:31pm UTC](https://discourse.threejs.org/t/how-to-get-different-colored-lines/10891/6 "2019-11-18T17:31:35Z")

</div>

> [@Thiru](#):
>
> I think it is a bit strange way of doing it in three.js

Well, it’s even more complicated when rendering with raw WebGL. It’s pretty hard to map your mentioned high-level API to a low-level graphics interface. If you are once familiar with the internals of `BufferGeometry`, it’s should be not hard to generate the necessary group data.

---

<div class="post-metadata">

**Author:** ![Thiru](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Thiru](https://discourse.threejs.org/u/Thiru)\
**Post date:** [November 18, 2019, 5:48pm UTC](https://discourse.threejs.org/t/how-to-get-different-colored-lines/10891/7 "2019-11-18T17:48:21Z")

</div>

Thanks. I know. Many years ago remember working with benson, calcomp plotters and UNIRAS graphics - [http://www.uniras.dk/Uniras/Welcome.html](http://www.uniras.dk/Uniras/Welcome.html) etc. All gone now.

---

<div class="post-metadata">

**Author:** ![Thiru](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Thiru](https://discourse.threejs.org/u/Thiru)\
**Post date:** [November 18, 2019, 5:50pm UTC](https://discourse.threejs.org/t/how-to-get-different-colored-lines/10891/8 "2019-11-18T17:50:24Z")

</div>

Thank you. I will try.