examples/example23.html


<!DOCTYPE html>
<html>
 <head> 
  <title>Example 23 - Basic 3D geometries - Cylinder</title> 
  <style>
    body{
      margin: 0;
      overflow: hidden;
    }

    #stats {  /* Align stats top-left */
      position: absolute;
      left: 0px;
      top: 0px;
    }
  </style> 
  </head>
  <body>
  <!-- JavaScript libraries -->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
  <script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r67/three.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/stats.js/r11/Stats.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
  <script src="assets/libs/TrackballControls.js"></script>
  <!-- Javascript code that runs our Three.js examples --> 
  <script>
    // once everything is loaded, we run our Three.js stuff.
    $(function () {
      var stats = initStats();

      // create a scene, that will hold all our elements such as objects, cameras and lights.
      var scene = new THREE.Scene();

      // create a camera, which defines where we're looking at.
      var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

      // create a render and set the size
      var webGLRenderer = new THREE.WebGLRenderer();
      webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
      webGLRenderer.setSize(window.innerWidth, window.innerHeight);
      webGLRenderer.shadowMapEnabled = true;

      var cylinder = createMesh(new THREE.CylinderGeometry(20, 20, 20));
      // add the sphere to the scene
      scene.add(cylinder);

      // position and point the camera to the center of the scene
      camera.position.set(-40,50,60);
      camera.lookAt(new THREE.Vector3(10, 0, 0));

      // add the output of the renderer to the html element
      $('body').append(webGLRenderer.domElement);

      // call the render function
      var step = 0;

      // setup the control gui
      var controls = new function () {
        // we need the first child, since it's a multimaterial

        this.radiusTop = 20;
        this.radiusBottom = 20;
        this.height = 20;

        this.segmentsX = 8;
        this.segmentsY = 1;

        this.openEnded = false;

        this.redraw = function () {
          // remove the old plane
          scene.remove(cylinder);
          // create a new one

          cylinder = createMesh(new THREE.CylinderGeometry(controls.radiusTop, controls.radiusBottom, controls.height, controls.segmentsX, controls.segmentsY, controls.openEnded));
          // add it to the scene.
          scene.add(cylinder);
        };
      }

      var gui = new dat.GUI();
      gui.add(controls, 'radiusTop', -40, 40).onChange(controls.redraw);
      gui.add(controls, 'radiusBottom', -40, 40).onChange(controls.redraw);
      gui.add(controls, 'height', 0, 40).onChange(controls.redraw);
      gui.add(controls, 'segmentsX', 1, 20).step(1).onChange(controls.redraw);
      gui.add(controls, 'segmentsY', 1, 20).step(1).onChange(controls.redraw);
      gui.add(controls, 'openEnded').onChange(controls.redraw);


      render();

      function createMesh(geom) {

        // assign two materials
        var meshMaterial = new THREE.MeshNormalMaterial();
        meshMaterial.side = THREE.DoubleSide;
        var wireFrameMat = new THREE.MeshBasicMaterial();
        wireFrameMat.wireframe = true;

        // create a multimaterial
        var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);

        return mesh;
      }

      function render() {
        stats.update();

        cylinder.rotation.y = step += 0.01;

        // render using requestAnimationFrame
        requestAnimationFrame(render);
        webGLRenderer.render(scene, camera);
      }

      function initStats() {
        var stats = new Stats();
        stats.setMode(0); // 0: fps, 1: ms
        $('body').append(stats.domElement);
        return stats;
      }
    });
  </script>  
 </body>
</html>