title: How to create a Three.js 3D line series with width and thickness?
body: <p>Is there a way to create a Three.js 3D line series with width and thickness?</p>
  
  <p>Even though the Three.js line object supports linewidth, this attribute is not yet supported in all browsers on all platforms in WebGL.</p>
  
  <p>Here's where you set linewidth in Three.js:</p>
  
  <pre><code>    var material = new THREE.LineBasicMaterial({
          color: 0xff0000,
          linewidth: 5
      });
  </code></pre>
  
  <p>The Three.js ribbon object - which had width - has recently been dropped.</p>
  
  <p>The Three.js tube object generates 3D extrusions but - being Bezier-based - the lines do not pass through the control points.</p>
  
  <p>Can anybody think of a method of drawing a line series (polylines, plotlines) in Three.js that has some sort of user definable 'bulk' such as width, thickness or radius?</p>
  
  <p>This question may be a restating of this question: 
  <a href="https://stackoverflow.com/questions/15824358/extruding-a-graph-in-three-js">Extruding a graph in three.js</a>.</p>
  
  <p>Given that I do not think that there is a readily available method, I would be happy to participate in an effort to create a simple function that responds to this question.</p>
  
  <p>But a response that points to an existing workable method would be cool...</p>
  
  <p>As WestLangley suggests, one possible solution includes the polyline being of constant pixel width - as is currently available with the Three.js canvas renderer.</p>
  
  <p>A comparison of the two renderers is shown here:</p>
  
  <p><a href="http://jaanga.github.io/blode/canvas-webgl-lines-compared/r1/canvas-webgl-lines-compared.html" rel="nofollow noreferrer">Canvas and WebGL Lines Compared via GitHub Pages</a></p>
  
  <p><a href="http://jsfiddle.net/theo/Vc7yr/" rel="nofollow noreferrer">Canvas and WebGL Lines Compared via jsFiddle</a></p>
  
  <p><img src="https://i.stack.imgur.com/CKjZc.png" alt="enter image description here"></p>
  
  <p>A solution where you could specify linewidth and similar results occurred on both renderers would be very cool.</p>
  
  <p>There are, however, other ways of thinking of 3D lines where lines have actual physical constructs. They cast shadows, they respond to events. These also need to be looked into. </p>
  
  <p>Here are links to GitHub Pages with two demos of lines made up of multiple meshes:</p>
  
  <p><img src="https://i.stack.imgur.com/s3D9v.png" alt="Spheres and Cubes Polyline"></p>
  
  <p><a href="http://jaanga.github.io/blode/lines-with-width-and-thickness/sphere-and-cylinder-polylines/sphere-and-cylinder-polylines.html" rel="nofollow noreferrer">Sphere and Cylinder Polylines</a></p>
  
  <p>An 'expensive solution. Each joint is made up of a full sphere.</p>
  
  <p><img src="https://i.stack.imgur.com/KxqWO.png" alt="Cubes Polylines"></p>
  
  <p><a href="http://jaanga.github.io/blode/lines-with-width-and-thickness/cubes-polylines/cubes-polylines.html" rel="nofollow noreferrer">Cubes Polylines</a></p>
  
  <p>My guess is that building either of these as smooth single meshes will be complex to problems to solve. So in the meantime here is a link to a partial visualization of 3D lines that are wide and have height:</p>
  
  <p><a href="http://jsfiddle.net/theo/eX4ba/" rel="nofollow noreferrer">3D Box Line on jsFiddle</a></p>
  
  <p><img src="https://i.stack.imgur.com/ReDNC.png" alt="3d box lines"></p>
  
  <p>The goal is have to code 'with a low level of complexity - in other words - for dummies'. Thus a 3D line should be as easy and as familiar as adding a sphere or cube. Geometry + material = mesh > scene. And the geometry should be quite economical in terms of creating vertices and faces.</p>
  
  <p>The lines should have width and height. Up is always in the Y direction. The demo shows this. What the demo does not show is corners being mitred nicely...</p>