Changing Gcode to thicker lines and reflection

Hi Guys,

I’m trying to convert the GCode example benchy to a more thicker and reflective line, a bit like the example image. Is there an easy way to do this? I managed to rewrite the GcodeLoader to show MeshPhongMaterial, but I can’t seem to make the lines thicker…


You have two options:

  • You can use the wide line implementation in three.js demonstrated here in webgl_lines_fat. With this approaoch, lines are represented as a sequence of triangles. However, the respective line material does not support lights so you can’t have reflections.
  • Another option is to generate an instance of TubeGeometry. To do this, you have to create an instance of Path based on the sequence of vertices. With this geometry, you can create a mesh and apply a lit material to it.

Hi Mugen87,

Thank you for your quick answer and your help. Unfortunately your first solutions doesn’t work. If I use the webgl_lines_fat implementation, the browser almost crashes and the object that appears doesn’t look like the model at all. My code is as follows (in the GcodeLoader.js)

const geometry = new LineGeometry();
			geometry.setPositions( positions ); //positions equal to the webgl_lines_fat

			matLine = new LineMaterial( {

				color: 0xffffff,
				linewidth: 1, // in pixels
				vertexColors: false,
				//resolution:  // to be set by renderer, eventually
				dashed: false

			} );

			line = new LineSegments( geometry, matLine ); //segments instead of Line2 as used in the original GCodeLoader, but also using Line2 fails

			object.add( line );

If you want I can give the full GCodeLoader.js file that I am amending.

Your second solutions looks promising as it’s more ‘tube-like’. However, the Path you are referring to needs a Curve type. I have vectors or positions… How do I convert these into ‘Curve’?


I think it should work if you create an array of Vector3 based on the points of your line and then pass this array to the ctor of THREE.Path.

Hi Mugen,

The THREE.Path takes an array of Vector2. I tried passing the Vector3 array but no joy…

Can you try it with a THREE.CatmullRomCurve3?

Almost… :grin: It looks like some points are not taken correctly (rounding?), and in general doesn’t look as smooth as the example… Any idea’s?

Hello, I saw your question on the three forum about Gcode data rendering line thickening and light and shadow reflection. I don’t know if you have solved this problem. I have a similar problem now. Line segments have been bold but the problem of light and shadow reflection has been bothering for a long time, I hope to get your help, thank you