HTML5 Canvas WebGL Sphere with Three.js

To create a WebGL sphere with Three.js, we can instantiate a SphereGeometry object by defining its radius, segmentsWidth, and segmentsHeight parameters. Increasing the segmentsWidth and segmentsHeight will yield a more perfect sphere but may degrade rendering performance. Decreasing the segmentsWidth and segmentsHeight will yield a less perfect sphere and may help rendering 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">
      // 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 = 500;
 
      // scene
      var scene = new THREE.Scene();
                
      // sphere
      // the first argument of THREE.SphereGeometry is the radius, the second argument is
      // the segmentsWidth, and the third argument is the segmentsHeight.  Increasing the 
      // segmentsWidth and segmentsHeight will yield a more perfect circle, but will degrade
      // rendering performance
      var sphere = new THREE.Mesh(new THREE.SphereGeometry(150, 100, 100), new THREE.MeshNormalMaterial());
      sphere.overdraw = true;
      scene.add(sphere);
 
      renderer.render(scene, camera);
    </script>
  </body>
</html>

< Cube Cylinder >

More Examples

No Related Post

Modified on April 16th, 2013 by Eric Rowell