How to get different colored lines?

Questions
,
1

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

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

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

3

You can only use multiple materials when 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().

1 Like
4

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.

5

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.

6

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.

1 Like
7

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

8

Thank you. I will try.