Q-and-A

ringGeometry with height

by jmchen

HTML

<div id="info">Q & A 3/9/16
  <br>
  <br> Ring Geometry with Height
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r74/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js">


</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>

CSS

#info {
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}

#gui {
  position: absolute;
  top: 50px;
  right: 10px;
  height: 500px;
  //text-align: center;
}

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer;
var controls;

init();
animate();

function init() {
  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 200;
  scene.add(camera);

  var axes = new THREE.AxisHelper(150);
  scene.add(axes);

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);

  controls = new THREE.OrbitControls(camera, renderer.domElement);

  var light2 = new THREE.PointLight(0xffff00, 0.4);
  light2.position.set(50, 150, 50);
  scene.add(light2);
  var light1 = new THREE.PointLight(0x00ffff, 0.4);
  light1.position.set(50, -150, 50);
  scene.add(light1);
  var amblight = new THREE.AmbientLight(0x404040); // soft white light
  scene.add(amblight);
  document.body.appendChild(renderer.domElement);
  window.addEventListener('resize', onWindowResize, false);
  ///////////////////////////////////////////////////////////////
  outerCyl = new THREE.Mesh(new THREE.CylinderGeometry(50, 50, 30, 20, 1, true),
    new THREE.MeshLambertMaterial({
      side: THREE.DoubleSide
    }));
  innerCyl = new THREE.Mesh(new THREE.CylinderGeometry(30, 30, 30, 20, 1, true),
    new THREE.MeshLambertMaterial({
      side: THREE.DoubleSide
    }));
  ring = new THREE.Mesh(new THREE.RingGeometry(30, 50, 20),
    new THREE.MeshLambertMaterial({
      side: THREE.FrontSide
    }));
  scene.add(outerCyl);
  scene.add(innerCyl);
  
  ring.position.y = 15;
  ring.rotation.x = -Math.PI / 2;
  ring2 = ring.clone();
  ring2.position.y = -15;
  ring2.rotation.x = Math.PI / 2;

  scene.add(ring);
  scene.add(ring2);
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}


function animate() {
  controls.update();
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}