is it possible to use MeshPhongMaterial?

[stewartoallen]

or is there another way to achieve non-flat shading?

[spite]

Unfortuntely it's flat, for now. Once three.js shader system becomes more modular, it will be able to use Phong or PBR materials.

You can try cloning MeshPhongMaterial and adding the relevant part of the vertex shader, which is what does most of the work.

[Clotoo]

From what I understand of shaders and lighting and stuff, this would be impossible because the line is still a single 2D face, always facing camera.

I don't know what your use case is, but I worked out something related, which could be interesting for you or others, so I'll post it here for future reference.

Basically, I am simulating 3d tubes by darkening the edges of the line. It looks like this :

This requires having vertices on the edge and vertices in the center so now I am building 3 vertices per point instead of 2, which gives us 4 triangles per segment instead of 2. It's basically a lot of duplication, a little change for the indices, and a little addition in the shader.

Here is a diff for those interested :

$ diff THREE.MeshLine.org.js THREE.MeshLine3.js
42a43,44
>                       this.positions.push( v.x, v.y, v.z );
>                       this.counters.push(c);
56a59,60
>                       this.positions.push( g[ j ], g[ j + 1 ], g[ j + 2 ] );
>                       this.counters.push(c);
68,69c72,73
<       var aa = a * 6;
<       var ab = b * 6;
---
>       var aa = a * 9;
>       var ab = b * 9;
76c80
<       var aa = a * 6;
---
>       var aa = a * 9;
83c87
<       var l = this.positions.length / 6;
---
>       var l = this.positions.length / 9;
93,94c97,99
<               this.side.push( 1 );
<               this.side.push( -1 );
---
>               this.side.push(1);
>               this.side.push(0);
>               this.side.push(-1);
102a108
>               this.width.push( w );
106a113
>               this.uvs.push( j / ( l - 1 ), 0.5 );
118a126
>       this.previous.push( v[ 0 ], v[ 1 ], v[ 2 ] );
122a131
>               this.previous.push( v[ 0 ], v[ 1 ], v[ 2 ] );
128a138
>               this.next.push( v[ 0 ], v[ 1 ], v[ 2 ] );
137a148
>       this.next.push( v[ 0 ], v[ 1 ], v[ 2 ] );
140,142c151,155
<               var n = j * 2;
<               this.indices_array.push( n, n + 1, n + 2 );
<               this.indices_array.push( n + 2, n + 1, n + 3 );
---
>               var n = j * 3;
>               this.indices_array.push( n, n + 1, n + 3 );
>               this.indices_array.push( n + 3, n + 1, n + 4 );
>               this.indices_array.push( n + 1, n + 2, n + 4 );
>               this.indices_array.push( n + 4, n + 2, n + 5 );
221c234
<       memcpy( positions, 6, positions, 0, l - 6 );
---
>       memcpy( positions, 9, positions, 0, l - 9 );
222a236,238
>       positions[l - 9] = position.x;
>       positions[l - 8] = position.y;
>       positions[l - 7] = position.z;
231c247
<       memcpy( positions, 6, next, 0, l - 6 );
---
>       memcpy( positions, 9, next, 0, l - 9 );
232a249,251
>       next[l - 9]  = position.x;
>       next[l - 8]  = position.y;
>       next[l - 7]  = position.z;
287c306,309
< '    vColor = vec4( color, opacity );',
---
> '    vColor = vec4(color, 0);',
> '    if ( side != 0. ) vColor *= 0.5;',
> '    vColor.a = opacity;',