title: detect cylinder faces in three.js
body: <p>I've created a scene with textured and meshed cylinder and a grid with line and vertices of three.js. The cylinder has a spinning effect by dragging mouse left or right. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;title&gt;3d Model using HTML5 and three.js&lt;/title&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"&gt;
          &lt;style&gt;
              body {
                  font-family: Monospace;
                  background-color: #f0f0f0;
                  margin: 0px;
                  overflow: hidden;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;script src="three.min.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="Stats.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="Detector.js" type="text/javascript"&gt;&lt;/script&gt;
  
          &lt;script&gt;
              if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
  
              var container, stats;
  
              var camera, scene, renderer, light, projector;
              var particleMaterial;
              var cylinder, line, geometry, geometry1;
  
              var targetRotation = 0;
              var targetRotationOnMouseDown = 0;
  
              var mouseX = 0;
              var mouseXOnMouseDown = 0;
  
              var windowHalfX = window.innerWidth / 2;
              var windowHalfY = window.innerHeight / 2;
  
              var objects = [];
  
              var radious = 1600, theta = 45, onMouseDownTheta = 45, phi = 60, onMouseDownPhi = 60, isShiftDown = false;
              init();                     
              animate();
  
              function init() {
  
                  container = document.createElement( 'div' );
                  document.body.appendChild( container );
  
                  var info = document.createElement( 'div' );
                  info.style.position = 'absolute';
                  info.style.top = '10px';
                  info.style.width = '100%';
                  info.style.textAlign = 'center';
                  info.innerHTML = 'Drag to spin the cylinder&lt;br/&gt;Objective: By spining left, cylinder should go into the surface and by spining right it should come out.';
                  container.appendChild( info );
  
                  // camera
  
                  camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
                  camera.position.y = 200;                
                  camera.position.z = 800;
  
  
                  // scene
  
                  scene = new THREE.Scene();
  
                  // light
  
                  scene.add( new THREE.AmbientLight( 0x404040 ) );
                  light = new THREE.DirectionalLight( 0xffffff );
                  light.position.set( 0, 1, 0 );
                  scene.add( light );
  
                  // texture              
  
                  var materials = [];
  
                  for ( var i = 0; i &lt; 6; i ++ ) {
  
                      materials.push( new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
  
                  }//alert(materials.length);
  
                  // Grid
  
                  geometry = new THREE.Geometry();
                  geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) );
                  geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );
  
                  for ( var i = 0; i &lt;= 20; i ++ ) {
  
                      line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
                      line.position.z = ( i * 50 ) - 500;
                      scene.add( line );
  
                      line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
                      line.position.x = ( i * 50 ) - 500;
                      line.rotation.y = 90 * Math.PI / 180;
                      scene.add( line );
                  }
  
  
                  // cylinder                                         
                  geometry1 = new THREE.CylinderGeometry(100, 100, 300, 16, 4, false);
  
                  cylinder = new THREE.Mesh(geometry1 ,new THREE.MeshLambertMaterial( { color: 0x2D303D, wireframe: true, shading: THREE.FlatShading } ));
                  //cylinder.position.x = 100;
                  cylinder.position.y = -50;
                  //cylinder.overdraw = true;
                  scene.add(cylinder);
                  alert(geometry1.faces.length);
                  objects.push(cylinder);
  
  
                  // projector
                  projector = new THREE.Projector();
  
                  // renderer
  
                  renderer = new THREE.CanvasRenderer();
                  renderer.setSize( window.innerWidth, window.innerHeight );
                  container.appendChild( renderer.domElement );               
  
                  // stats
  
                  stats = new Stats();
                  stats.domElement.style.position = 'absolute';
                  stats.domElement.style.top = '0px';
                  container.appendChild( stats.domElement );
  
                  document.addEventListener( 'mousedown', onDocumentMouseDown, false );
                  document.addEventListener( 'touchstart', onDocumentTouchStart, false );
                  document.addEventListener( 'touchmove', onDocumentTouchMove, false );               
  
                  window.addEventListener( 'resize', onWindowResize, false );
  
              }
  
              function onWindowResize() {
  
                  camera.left = window.innerWidth / - 2;
                  camera.right = window.innerWidth / 2;
                  camera.top = window.innerHeight / 2;
                  camera.bottom = window.innerHeight / - 2;
                  camera.aspect = window.innerWidth / window.innerHeight;
                  //camera.updateProjectionMatrix();
  
                  renderer.setSize( window.innerWidth, window.innerHeight );
  
              }
  
              function onDocumentMouseDown( event ) {         
  
                  event.preventDefault();
  
                  document.addEventListener( 'mousemove', onDocumentMouseMove, false );
                  document.addEventListener( 'mouseup', onDocumentMouseUp, false );
                  document.addEventListener( 'mouseout', onDocumentMouseOut, false );
  
                  mouseXOnMouseDown = event.clientX - windowHalfX;
                  targetRotationOnMouseDown = targetRotation;
  
  
  
              }
  
              function onDocumentMouseMove( event ) {
  
                  mouseX = event.clientX - windowHalfX;
  
                  targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
  
              }
  
              function onDocumentMouseUp( event ) {
  
                  document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
                  document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
                  document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
  
              }
  
              function onDocumentMouseOut( event ) {
  
                  document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
                  document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
                  document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
  
              }
  
              function onDocumentTouchStart( event ) {
  
                  if ( event.touches.length === 1 ) {
  
                      event.preventDefault();
  
                      mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
                      targetRotationOnMouseDown = targetRotation;
  
                  }
  
              }
  
              function onDocumentTouchMove( event ) {
                  if ( event.touches.length === 1 ) {
                      event.preventDefault();
                      mouseX = event.touches[ 0 ].pageX - windowHalfX;
                      targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
                  }
              }
  
              function animate() {
                  requestAnimationFrame( animate );
                  render();
                  stats.update();
  
              }
  
              function render() {             
                  cylinder.rotation.y += ( targetRotation - cylinder.rotation.y ) * 0.05;
                  renderer.render( scene, camera );               
              }           
  
  
          &lt;/script&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>How do I know which face of cylinder is selected by clicking on a face of it ?</p>