HTML5 Canvas WebGL Cone with Three.js

To create a WebG cone with Three.js, we can instantiate a CylinderGeometry object by setting the top radius to zero, defining the bottom radius, the height, and the level of detail via the segmentsRadius and segmentsHeight parameters. Increasing the segmentsWidth and segmentsHeight will yield a more perfect cylinder but may degrade performance. Decreasing the segmentsWidth and segmentsHeight will yield a less perfect cone but may help performance.

Open in new window

Code Editor

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://www.html5canvastutorials.com/libraries/three.min.js"></script>
    <script defer="defer">
      // revolutions per second
      var angularSpeed = 0.2; 
      var lastTime = 0;
 
      // this function is executed on each animation frame
      function animate(){
        // update
        var time = (new Date()).getTime();
        var timeDiff = time - lastTime;
        var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
        cylinder.rotation.x += angleChange;
        lastTime = time;
 
        // render
        renderer.render(scene, camera);
 
        // request new frame
        requestAnimationFrame(function(){
            animate();
        });
      }
 
      // renderer
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);
 
      // camera
      var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
      camera.position.z = 700;
 
      // scene
      var scene = new THREE.Scene();
                
      // cylinder
      // API: THREE.CylinderGeometry(bottomRadius, topRadius, height, segmentsRadius, segmentsHeight)
      var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(0, 100, 400, 50, 50, false), new THREE.MeshNormalMaterial());
      cylinder.overdraw = true;
      scene.add(cylinder);
 
      // start animation
      animate();
    </script>
  </body>
</html>

< Cylinder Normal Material >

More Examples

HTML5 Canvas WebGL Cylinder with Three.js

Modified on April 18th, 2013 by Eric Rowell