To create a WebGL cylinder with Three.js, we can instantiate a CylinderGeometry object by defining the top and bottom radius as the same value, defining the height, and the level of detail via the segmentsRadius and segmentsHeight parameters. Increasing the segmentsWidth and segmentsHeight will yield a more perfect cylinder but may degrade performance. Decreasing the segmentsWidth and segmentsHeight will yield a less perfect cylinder and may help performance.
HTML5 Canvas WebGL Cylinder with Three.js
Modified on April 18th, 2013 by Eric Rowell