title: three.js: Cylinder with negative thetaLength
body: <p>I want to use an "inverted" cylinder with the thetaLength set to -6.3 so that the inside will be classed as the FrontSide, so then that cylinder can go inside another normal cylinder with rings on the top and bottom to form a tube.</p>
  
  <p>The reason I want to do all this is so the whole object can be combined into one mesh with a single material. If you don't set the thetaLength to negative you have to have a duplicate material with the side set to BackSide, so you can't have it all as one mesh.</p>
  
  <p>I've done what I'm talking about in the example below (you can zoom and move with the mouse). The negative theta cylinder is on the left and the normal one is on the right. </p>
  
  <p>The problem that I'm having is, you can see that cylinder in question (the inside) of the left one is much darker than on the right one. The right one looks much more realistic.</p>
  
  <p>I'm thinking maybe it's because it thinks the light is coming from a different direction to where it's actually coming from.</p>
  
  <p>Is there any way to fix this and make the inverted cylinder appear like the BackSide one so that I can have a tube like this as a single mesh?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>width = window.innerWidth
  height = window.innerHeight
  
  renderer = new THREE.WebGLRenderer({antialias: true})
  renderer.setClearColor(0x8e8ed7)
  renderer.setPixelRatio(window.devicePixelRatio)
  renderer.setSize(width, height)
  document.body.appendChild(renderer.domElement)
  
  scene = new THREE.Scene()
  camera = new THREE.PerspectiveCamera(35, width / height, 0.1, 3000)
  camera.position.set(0, 50, 100)
  
  controls = new THREE.OrbitControls(camera)
  controls.minDistance = 40
  controls.maxDistance = 1300
  
  scene.add(camera, new THREE.AmbientLight(0xffffff, 0.48))
  light = new THREE.PointLight(0xffffff, 0.55)
  
  light.position.copy( camera.position );
  light.position.y -= 80
  light.position.x += 100
  camera.add(light)
  
  requestAnimationFrame(function animate(){
    requestAnimationFrame(animate)
    renderer.render(scene, camera)
  })
  
  material = new THREE.MeshPhongMaterial({color: 0xFF7E14, specular: 0x111111, shininess: 75})
  material2= new THREE.MeshPhongMaterial({color: 0xFF7E14, specular: 0x111111, shininess: 75, side: THREE.BackSide})
  
  tube_a = new THREE.Mesh(new THREE.CylinderGeometry(6,6,20,32,1,true,0,-6.3), material)
  tube_aa = new THREE.Mesh(new THREE.CylinderGeometry(6,6,20,32,1,true,0,6.3), material2)
  tube_b = new THREE.Mesh(new THREE.CylinderGeometry(8.1375,8.1375,20,32,1,true), material)
  ring = new THREE.Mesh(new THREE.RingGeometry(6,8.1375,32), material)
  
  group1 = new THREE.Group()
  
  ta1 = tube_a.clone()
  group1.add(ta1)
  tb1 = tube_b.clone()
  group1.add(tb1)
  r = ring.clone()
  r.position.y -= 10
  r.rotateX((9*Math.PI)/18)
  group1.add(r)
  r = ring.clone()
  r.position.y += 10
  r.rotateX((27*Math.PI)/18)
  group1.add(r)
  group1.position.x -= 15
  scene.add(group1)
  
  group2 = new THREE.Group()
  
  ta2 = tube_aa.clone()
  group2.add(ta2)
  tb2 = tube_b.clone()
  group2.add(tb2)
  r = ring.clone()
  r.position.y -= 10
  r.rotateX((9*Math.PI)/18)
  group2.add(r)
  r = ring.clone()
  r.position.y += 10
  r.rotateX((27*Math.PI)/18)
  group2.add(r)
  group2.position.x += 15
  scene.add(group2)</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="http://threejs.org/build/three.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://threejs.org/examples/js/controls/OrbitControls.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>