Three.js - Ring (by extruding rectangle)

HTML

<script src="http://mrdoob.github.io/three.js/build/three.min.js"></script>
<script src="http://mrdoob.github.io/three.js/examples/js/controls/TrackballControls.js"></script>
<script src="http://mrdoob.github.io/three.js/examples/js/Detector.js"></script>
<body>
  <div id="container"></div>
  <div id="info">
	<a href="http://threejs.org" target="_blank">three.js</a>
    - trackball controls example</br>
    MOVE mouse &amp; press LEFT/A: rotate, MIDDLE/S: zoom, RIGHT/D: pan
  </div>
</body>

CSS

body {
  color: #000;
  font-family:Monospace;
  font-size:13px;
  text-align:center;
  font-weight: bold;
  background-color: #fff;
  margin: 0px;
  overflow: hidden;
}

#info {
  color:#000;
  position: absolute;
  top: 0px; width: 100%;
  padding: 5px;
}

a {
  color: red;
}

JavaScript

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, controls, scene, renderer;
var cross;

init();
animate();

function init() {
  camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
  camera.position.z = 500;

  controls = new THREE.TrackballControls( camera );

  controls.rotateSpeed = 1.0;
  controls.zoomSpeed = 1.2;
  controls.panSpeed = 0.8;

  controls.noZoom = false;
  controls.noPan = false;

  controls.staticMoving = true;
  controls.dynamicDampingFactor = 0.3;

  controls.keys = [ 65, 83, 68 ];

  controls.addEventListener( 'change', render );

  // world
  scene = new THREE.Scene();
  scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );
   	var segs = 96;
    var radius = .5;
  var ii = radius * 1.200;
  var oo = radius * 1.950;

  var geometry = new THREE.RingBufferGeometry(ii, oo, segs);

  var uvs = geometry.attributes.uv.array;
  // loop and initialization taken from RingBufferGeometry
  var phiSegments = geometry.parameters.phiSegments || 0;
  var thetaSegments = geometry.parameters.thetaSegments || 0;
  phiSegments = phiSegments !== undefined ? Math.max( 1, phiSegments ) : 1;
  thetaSegments = thetaSegments !== undefined ? Math.max( 3, thetaSegments ) : 8;
  for ( var c = 0, j = 0; j <= phiSegments; j ++ ) {
      for ( var i = 0; i <= thetaSegments; i ++ ) {
          uvs[c++] = i / thetaSegments;
          uvs[c++] = j / phiSegments;
      }
  }
  var material =  new THREE.MeshLambertMaterial( { color:0xffffff, shading: THREE.FlatShading } );
    

    var mesh = new THREE.Mesh( geometry, material );
    mesh.updateMatrix();
    mesh.matrixAutoUpdate = false;
    scene.add( mesh );



  // lights
  light = new THREE.DirectionalLight( 0xffffff );
  light.position.set( 1, 1, 1 );
  scene.add( light );
    
  light = new THREE.DirectionalLight( 0x002288 );
  light.position.set( -1, -1, -1 );
  scene.add( light );

  light = new THREE.AmbientLight( 0x222222 );
  scene.add(...